最简实现需在用户点击事件中调用navigator.clipboard.writetext(window.location.href)，并提供“已复制”视觉反馈；不支持时降级使用document.execcommand('copy')配合临时textarea，且须排除hash、避免无响应。

点击按钮复制当前页面URL的最简实现

直接用 navigator.clipboard.writeText() 写入 window.location.href 就行，但必须在用户手势触发的上下文中（比如 click 事件里），否则会因权限被拒绝。

常见错误是把复制逻辑写在页面加载时或定时器里，这时调用 navigator.clipboard.writeText() 会抛出 "Permission denied" 错误，浏览器根本不给机会。

• 确保绑定在 button 或 a 的 onclick 上，或者用 addEventListener('click', ...)
• 不要用 window.onload、setTimeout 或 fetch 回调里调用它
• 移动端 Safari 对 navigator.clipboard 支持较晚（iOS 13.4+），老版本需降级处理

兼容旧浏览器的备选方案：document.execCommand('copy')

document.execCommand('copy') 虽已废弃，但在 Chrome 90 之前、Firefox 以及部分安卓 WebView 中仍是唯一可用方式。它要求先选中一段 input 或 textarea 的内容，再执行命令。

关键点不是“能不能用”，而是“怎么安全地 fallback”——不能只靠 try/catch 判断，因为废弃 API 在新浏览器里可能直接不定义，也可能抛异常。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 优先检测 navigator.clipboard?.writeText 是否存在且为函数
• 若不支持，动态创建一个 textarea，设 value = window.location.href，然后 select() + execCommand('copy')
• 记得 remove() 临时元素，避免 DOM 泄漏
• IE11 及更老版本不支持 execCommand 在非编辑状态调用，需设 contenteditable="true" 或聚焦后再操作

复制后给用户明确反馈，别只靠 console.log

用户点了没反应，大概率会再点一次甚至刷新页面。静默成功或失败都等于失败。

最轻量的反馈是改按钮文字，比如从“复制链接”变成“已复制！”，2 秒后自动恢复。别依赖 alert()，它阻塞主线程且体验差。

• 修改 button.textContent 或 innerText 即可，无需框架
• 用 setTimeout 恢复原始文案，注意保存原始值（比如用 data-original-text 属性）
• 如果用了 tooltip 或 Toast 库，确保它们不和复制逻辑耦合——失败时也要显示“复制失败，请重试”
• 别在 catch 里只写 console.error(e)，这解决不了任何实际问题

分享到微信/微博等平台时 URL 需要额外处理

直接复制 window.location.href 在多数场景够用，但如果你希望分享出去的链接带参数（如 ?ref=share）、去掉 hash、或转成短链，就不能无脑复制当前地址。

典型陷阱是：用户从 https://a.com/page#section2 点击分享，结果别人打开跳到了锚点位置，而你本意只是分享页面主体。

• 用 window.location.origin + window.location.pathname + window.location.search 排除 hash
• 如果需要加渠道参数，拼接前先检查是否已有 ?，避免出现 ??ref
• 短链需服务端配合，前端最多发个请求获取，但别在点击复制时同步等待，应先复制原始 URL，再异步换短链并更新剪贴板（需再次用户手势）
• 微信内分享受限于 JSSDK，此时复制 URL 仅作备用，主流程仍需走 updateAppMessageShareData 等接口

实际中最容易被忽略的是权限上下文和反馈闭环：没点按钮就试图复制，必然失败；点了却没视觉响应，用户根本不知道发生了什么。这两处出问题，功能就等于不存在。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！