navigator.clipboard.writeText() 报“Permission denied”因需用户手势触发且限于安全上下文；须在 click 等事件中调用，禁用 setTimeout 或 load 时调用，file:// 协议不支持，旧版浏览器需降级使用 document.execCommand。
为什么 navigator.clipboard.writeText() 会报错 “Permission denied”
现代浏览器对剪切板写入有严格权限控制，navigator.clipboard.writeText() 必须在**用户手势触发的上下文**中调用（如 click、keydown），且页面需为安全上下文（https:// 或 localhost）。直接在 setTimeout、fetch 回调或页面加载时调用，会抛出 DOMException: Permission denied。
- 确保调用发生在
button.addEventListener('click', ...)这类明确由用户触发的事件处理函数内 - 避免在
DOMContentLoaded或load事件里直接调用 - 开发时若用
file://协议打开 HTML，也会失败——必须用本地服务器（如python3 -m http.server）
如何兼容旧版浏览器（比如 IE 或 Safari
老浏览器不支持 navigator.clipboard API，得回退到 document.execCommand('copy')，但该方法已被废弃，且要求元素必须可聚焦、已插入 DOM、并手动选中内容。
- 创建一个临时
，设style="position:fixed;top:-9999px;"避免闪屏 - 设置其
value并调用select()，再执行document.execCommand('copy') - 注意：Safari 在非用户手势中调用
execCommand同样会静默失败 - IE 仅支持
execCommand，且不支持读取剪切板（readText()）
function fallbackCopy(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.cssText = 'position:fixed;top:-9999px;left:-9999px;';
document.body.appendChild(textarea);
textarea.focus();
textarea.select();
try {
return document.execCommand('copy');
} finally {
document.body.removeChild(textarea);
}
}
复制富文本（HTML）或图片时要注意什么
navigator.clipboard.writeText() 只能写纯文本；要复制 HTML 或图片，必须用 navigator.clipboard.write()，传入 ClipboardItem 实例，且只在 Chrome/Edge ≥ 76 和 Firefox ≥ 117 中支持。
- 复制 HTML：需构造
new Blob([htmlString], {type: 'text/html'})，再包装成ClipboardItem - 复制图片：先用
fetch获取Blob，类型必须是image/png等真实 MIME 类型，不能写image/* - 所有
write()操作仍受用户手势和安全上下文限制 - 移动端 Safari 目前完全不支持
write()（包括图片和 HTML）
async function copyHtml(html) {
const htmlBlob = new Blob([html], { type: 'text/html' });
const item = new ClipboardItem({ 'text/html': htmlBlob });
await navigator.clipboard.write([item]);
}
粘贴时如何区分文本、文件或图片
navigator.clipboard.read() 是唯一能读取多种类型内容的方法，但它返回的是 ClipboardItem[]，每个 item 的 types 属性告诉你它支持哪些 MIME 类型。你得自己遍历判断。
立即学习“Java免费学习笔记（深入）”；
- 检查
item.types.includes('text/plain')→ 调用item.getType('text/plain')得到Blob，再用text()解析 - 检查
item.types.includes('image/png')→ 同样用getType()拿Blob，可转为URL.createObjectURL()预览 -
read()同样需要用户手势触发（如paste事件），且无法在页面加载时主动轮询 - 不要依赖
paste事件的e.clipboardData—— 它在跨源 iframe 或某些安全策略下为空
最稳妥的粘贴入口，始终是监听 document.addEventListener('paste', e => {...})，然后在回调里调用 navigator.clipboard.read()。
