navigator.clipboard操作必须在用户手势触发的上下文中执行，否则因权限限制报错或静默失败；读取需显式申请clipboard-read权限且兼容性差；降级用execCommand需临时textarea选中；富文本支持有限，推荐纯文本优先。

浏览器里用 navigator.clipboard 写入或读取剪贴板内容，必须在用户手势触发的上下文中（比如 click、keydown）才能成功，否则会直接报错或静默失败。

为什么 navigator.clipboard.writeText() 会报 “Permission denied” 或直接不执行？

现代浏览器把剪贴板 API 当作敏感权限，不是页面一加载就能用的。它要求操作必须由用户主动行为触发，且当前页面处于激活状态（focus）。常见错误场景包括：

• 在 setTimeout、fetch 回调、DOMContentLoaded 里直接调用
• 用 document.execCommand('copy') 的老方式但没配 contenteditable 或没选中文字
• HTTPS 站点下正常，但 HTTP 页面（除 localhost）会被浏览器完全禁用 navigator.clipboard

解决办法很简单：只在事件回调里调用，比如：

button.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('hello world');
    console.log('已复制');
  } catch (err) {
    console.error('复制失败:', err);
  }
});

navigator.clipboard.readText() 需要额外权限且兼容性更差

读取剪贴板比写入更受限制。Chrome 84+ 支持，Firefox 122+ 才支持（之前仅限扩展），Safari 目前仍不支持 readText()。而且即使支持，也必须显式申请权限：

立即学习“Java免费学习笔记（深入）”；

const permission = await navigator.permissions.query({ name: 'clipboard-read' });
if (permission.state === 'granted') {
  const text = await navigator.clipboard.readText();
} else if (permission.state === 'prompt') {
  // 用户首次调用时会弹窗请求授权
  await navigator.clipboard.readText();
}

注意：readText() 不能在非安全上下文（HTTP）运行；iOS Safari 完全不可用；部分安卓 WebView 也不支持。

如何优雅降级到 document.execCommand('copy')？

虽然 execCommand 已被废弃，但在需要兼容 IE11 或旧版 Safari 时仍是唯一选择。关键点是：必须把目标文本放进一个临时 并选中它：

function fallbackCopy(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed'; // 防止滚动/闪烁
  document.body.appendChild(textarea);
  textarea.select();
  try {
    document.execCommand('copy');
  } finally {
    document.body.removeChild(textarea);
  }
}

使用时先检测原生 API 是否可用：

if (navigator.clipboard && window.isSecureContext) {
  navigator.clipboard.writeText(text);
} else {
  fallbackCopy(text);
}

别忘了 window.isSecureContext 判断——HTTP 页面下 navigator.clipboard 存在但调用必失败。

复制富文本（HTML）、图片或多种格式怎么办？

navigator.clipboard.write() 支持多格式写入，但实际支持度很低。目前只有 Chrome 和 Edge 能较稳定写入 HTML 片段或 Blob 图片，且需构造 ClipboardItem：

const html = '粗体文本';
const blob = new Blob([html], { type: 'text/html' });
await navigator.clipboard.write([
  new ClipboardItem({ 'text/html': blob })
]);

但要注意：ClipboardItem 不支持所有 MIME 类型，比如 image/png 在 Firefox 中可能被忽略；移动端基本不可用；没有统一的“读取 HTML”方法，read() 返回的是原始 ClipboardItem 数组，需手动解析。

真正跨平台稳定的方案仍是：纯文本优先，富文本需求尽量引导用户用 Ctrl+V 粘贴到支持渲染的编辑器里——别指望浏览器帮你做格式还原。