前端实现复制功能，Uncaught TypeError: Cannot read property ‘writeText‘ of undefined

阿智@112024-12-10 9:54

必须在安全域中运行

安全域指的是 HTTPS 或 localhost 环境。非安全域（如 http://example.com）下调用 navigator.clipboard.writeText() 会报错，例如：

bash 复制代码

Uncaught TypeError: Cannot read property 'writeText' of undefined

该 API 必须在用户触发的事件（如点击按钮）中调用，否则会被浏览器拦截。

为了在所有环境中实现复制功能，可以采用以下兼容方案：

优先使用现代 API 如果环境支持 navigator.clipboard，优先使用它以确保性能和安全性。
回退到传统方法在非安全域或旧版浏览器中，可以使用 document.execCommand('copy') 实现文本复制。

实现代码:

bash 复制代码

function copyToClipboard(text) {
  // 检查 Clipboard API 是否可用
  if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
    return navigator.clipboard.writeText(text).then(() => {
      console.log("文本已成功复制到剪贴板（安全域）。");
    }).catch((err) => {
      console.error("复制失败：", err);
    });
  } else {
    // 非安全域或不支持 Clipboard API，使用 execCommand 兼容
    const textarea = document.createElement("textarea");
    textarea.value = text;
    textarea.style.position = "fixed"; // 避免影响页面布局
    textarea.style.top = "-9999px";
    document.body.appendChild(textarea);
    textarea.select();
    try {
      const successful = document.execCommand("copy");
      console.log(successful ? "文本已成功复制到剪贴板（非安全域）。" : "复制失败");
    } catch (err) {
      console.error("复制失败：", err);
    }
    document.body.removeChild(textarea);
  }
}