现代浏览器应使用 navigator.clipboard.writetext() 复制 url，需用户手势触发且不能异步调用；http 环境或旧版 safari 需降级处理，并务必捕获错误提示用户。
点击按钮复制当前页面 URL 的标准写法
现代浏览器基本都支持 navigator.clipboard.writeText()，这是最可靠的方式。不要用已废弃的 document.execCommand("copy")，它在 Chrome 90+、Firefox 85+ 中已被禁用或限制，且依赖 contenteditable 或 input 聚焦，容易失败。
关键点：必须由用户手势（如 click）触发，且不能在异步回调（比如 setTimeout 或 fetch 完成后）里调用，否则会被浏览器拒绝。
<button id="copyUrlBtn">复制当前链接</button>
<script>
document.getElementById("copyUrlBtn").addEventListener("click", async () => {
try {
await navigator.clipboard.writeText(window.location.href);
console.log("已复制:", window.location.href);
} catch (err) {
console.error("复制失败:", err);
}
});
</script>
处理复制失败的常见原因和 fallback 方案
即使用了 navigator.clipboard.writeText()，仍可能报错："Permission denied"（未获权限）、"writeText is not a function"（旧版 Safari）、或 "Failed to execute 'writeText' on 'Clipboard'"（非安全上下文，即 HTTP 页面）。
- 检查是否运行在 HTTPS 或
localhost下——HTTP 页面无法使用 Clipboard API - Safari 13.1+ 才支持
navigator.clipboard，更老版本需降级到document.execCommand+ 临时textarea - 不要忽略
catch，至少给用户一个提示，比如alert("请手动复制链接")
简单 fallback 示例（仅用于兼容 Safari 12 或 iOS 12）：
function copyToClipboard(text) {
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(text);
}
// fallback：创建临时 textarea
const el = document.createElement("textarea");
el.value = text;
el.setAttribute("readonly", "");
el.style.position = "absolute";
el.style.left = "-9999px";
document.body.appendChild(el);
el.select();
document.execCommand("copy");
document.body.removeChild(el);
}
<button></button> 标签上直接写 onclick 可以吗？
可以，但不推荐。内联事件处理器（如 onclick="copyUrl()"）会让逻辑分散、难调试、无法利用 async/await 的自然错误捕获，还容易引发作用域问题。
- 如果硬要用，必须确保函数已定义在全局作用域，例如
window.copyUrl = () => { ... } -
onclick里不能直接await，得包装成onclick="copyUrl().catch(console.error)" - 移动端 Safari 对内联 handler 的 clipboard 权限判断更严格，失败率更高
更稳妥的做法是用 addEventListener 分离结构与行为，也方便后续加 loading 状态或防抖。
复制带 UTM 参数或短链的动态链接怎么处理？
很多场景下不需要复制原始 URL，而是带渠道标记的链接，比如分享到微信时加 ?utm_source=wechat，或调用短链服务后替换 URL。
- 不要在
click时实时请求短链 API 再复制——异步操作会导致 clipboard 调用失效 - 推荐预生成：服务端渲染时注入
data-share-url属性，或前端在页面加载时提前 fetch 并缓存 - 若必须动态生成，可用同步拼接，例如
window.location.origin + window.location.pathname + "?utm_medium=button"
示例：
<button data-share-url="https://example.com/share?id=abc">分享</button>
<script>
document.querySelectorAll("[data-share-url]").forEach(btn =>
btn.addEventListener("click", () =>
navigator.clipboard.writeText(btn.dataset.shareUrl)
)
);
</script>
实际部署时最容易被忽略的是 HTTP 环境下的静默失败——没报错、没提示、用户以为点过了，其实什么都没复制进去。务必在开发阶段用真机 + 非 localhost HTTP 环境验证一次。
