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 时仍是唯一选择。关键点是：必须把目标文本放进一个临时 <textarea></textarea> 并选中它：
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 = '<strong>粗体文本</strong>';
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 粘贴到支持渲染的编辑器里——别指望浏览器帮你做格式还原。
