javascript如何实现复制到剪贴板_有哪些现代API【教程】_技术教程

最可靠方式是 navigator.clipboard.writeText()，但需满足安全上下文（HTTPS/localhost）和用户手势触发；否则报错如“undefined”“Permission denied”或“Document not focused”。

现代浏览器中，JavaScript 实现复制到剪贴板最可靠的方式是使用 navigator.clipboard.writeText()，它取代了已废弃的 document.execCommand('copy')。但直接调用该 API 有明确的限制条件，不是任何时候都能成功。

为什么 `navigator.clipboard.writeText()` 会报错？

这个 API 只能在安全上下文（HTTPS 或 localhost）中调用，且必须由用户手势（如 click、keydown）触发 —— 不能在定时器、异步回调或页面加载完成时自动执行。

常见错误信息："navigator.clipboard is undefined"（旧版 Safari 或禁用权限时）
"Permission denied"（未获用户授权，或非用户触发）
"Failed to execute 'writeText' on 'Clipboard': Document is not focused"（页面失焦，尤其在 Electron 或某些 iframe 场景）

如何安全调用 `navigator.clipboard.writeText()`？

必须确保：① 在事件处理器内；② 检查 API 是否可用；③ 捕获并处理拒绝情况。

button.addEventListener('click', async () => {
  if (!navigator.clipboard) {
    console.error('Clipboard API not supported');
    return;
  }
  try {
    await navigator.clipboard.writeText('Hello, world!');
    console.log('Copied!');
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
});

不要省略 async/await 或 .catch()，否则静默失败
避免在 setTimeout 或 Promise.resolve().then() 中调用 —— 即使紧接在 click 后也会失去“用户手势”上下文

Safari 16.4+ 才支持 writeText()，更早版本需降级方案

需要兼容老浏览器怎么办？

当 navigator.clipboard 不可用时，可回退到临时 + execCommand，但仅限于用户触发且页面有焦点的场景（且 execCommand 已被标记为废弃，Chrome 95+ 在非安全上下文中完全禁用）。

临时 textarea 必须 position: fixed; left: -9999px;，避免视觉跳动
必须先 select() 再 execCommand('copy')，否则无效
务必在操作后立即 remove() 临时元素，防止内存泄漏或重复绑定
此方式无法复制富文本或图片，仅适用于纯文本

复制富文本或 HTML 内容怎么处理？

navigator.clipboard.writeText() 只支持字符串；若要复制带样式的 HTML（如从 contenteditable 区域），需用 navigator.clipboard.write() 配合 ClipboardItem，但目前仅 Chromium 和 Firefox 支持，Safari 完全不支持。

示例写入 HTML：new ClipboardItem({ 'text/html': new Blob(['Bold'], {type: 'text/html'}) })
注意 MIME 类型必须精确匹配，'text/plain' 和 'text/html' 是两个独立粘贴项
移动端 WebView（如微信内置浏览器）普遍不支持 write()，务必降级到纯文本

真正容易被忽略的是：即使 API 调用成功，也无法保证用户实际粘贴出你期望的内容 —— 粘贴行为最终由目标应用决定，比如某些编辑器会过滤 HTML 标签，或纯文本编辑器只取 text/plain 版本。所以，优先用 writeText()，别为了“看起来高级”强行上 write()。