常用HTML点击复制当前页面链接的实用代码-html教程-PHP中文网

navigator.clipboard.writetext()是现代浏览器唯一可靠复制api，需https/localhost环境、用户手势同步触发，且必须配合textcontent更新按钮文案并保存原始文本，降级时需注意textarea可见性与dom操作顺序。

常用html点击复制当前页面链接的实用代码

必须用 `navigator.clipboard.writeText()`，否则无效

现代浏览器里，navigator.clipboard.writeText() 是唯一可靠路径。不用它，或者 fallback 到 document.execCommand('copy')，在 Chrome 98+、Firefox 85+、Safari 16.4+ 上会静默失败或直接报错 TypeError: Cannot read properties of undefined (reading 'writeText')。它要求：页面必须运行在 HTTPS 或 localhost 环境；调用必须由用户 click（或 touchend）手势同步触发；不能在 setTimeout、fetch().then()、window.onload 里执行。

`button` 绑定 click 事件 + 读取 `window.location.href`

最简、最稳的写法是让按钮直接读当前页 URL：

 <button id="copy-link">复制链接</button>
<script>
  const btn = document.getElementById('copy-link');
  btn.addEventListener('click', async () => {
    try {
      await navigator.clipboard.writeText(window.location.href);
      const original = btn.textContent;
      btn.textContent = '已复制！';
      setTimeout(() => btn.textContent = original, 2000);
    } catch (err) {
      console.warn('复制失败:', err.name);
      // 这里接降级逻辑（见下一条）
    }
  });
</script>

window.location.href 包含 protocol、host、path、search 和 hash，比拼接 location.origin + location.pathname 更完整，也比 document.URL 更可靠（后者在某些 SPA 路由切换后可能滞后）
别用 innerText 或 innerHTML 改按钮文字——textContent 更安全，不解析 HTML，也不会意外触发 XSS
务必保存原始文案（如用 data-original-text 属性或变量），否则多次点击后按钮会卡死

降级到 `document.execCommand('copy')` 的关键避坑点

当 navigator.clipboard 不可用时（如旧版 Safari、部分安卓 WebView），得靠 document.execCommand('copy') 回退。但它不是“加个 textarea 就行”，容易因隐藏方式或 focus 时机出错：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

textarea 必须 visible 且可聚焦：display: none 或 visibility: hidden 会让 select() 失效；推荐用 position: absolute; left: -9999px;
必须先 append 到 document.body，再 focus()，再 select()，顺序错一步就复制不了
iOS Safari（iOS 13.3 及更早）完全不支持该方法，检测到 /(iPhone|iPad|iPod)/i.test(navigator.userAgent) 应直接提示“请长按链接复制”
每次用完必须 remove() textarea，否则频繁点击会造成 DOM 泄漏

移动端 Safari 的特殊处理不能省

iOS Safari 对 navigator.clipboard 的支持从 iOS 13.4 开始，但仍有细节差异：

必须用 click，不能用 touchstart 或 mousedown —— 后两者在部分 iOS 版本中无法获得剪贴板权限
即使支持，首次调用也可能被系统弹窗拦截（尤其非 HTTPS 站点），catch 中捕获 NotAllowedError 后，应引导用户手动操作，而不是反复重试
按钮文案建议加 aria-live="polite"，方便屏幕阅读器用户感知状态变化，比如：<button aria-live="polite">复制链接</button>

真正麻烦的不是写几行代码，而是不同浏览器对“用户手势延续期”的判定差异——比如 React 里 onClick 里套了个 setState 再异步调用 writeText()，就可能失效。最保险的做法：所有复制逻辑都写在事件处理器顶层，链接值提前准备好，不依赖任何异步链路。