navigator.clipboard.writeText()是唯一推荐的现代剪贴板API，用于复制JS动态生成的内容，需HTTPS/localhost环境、用户手势触发且传入字符串；旧浏览器需用textarea+execCommand降级；Safari不支持HTML复制。
navigator.clipboard.writeText() 是唯一推荐的现代方案
动态内容（比如 JS 生成的随机码、API 返回的 token、实时渲染的配置项）必须用 navigator.clipboard.writeText() 复制，不能靠 user-select: all 或右键选中——因为用户根本看不到原始字符串，它压根没出现在 HTML 源码里。
这个 API 直接把 JS 变量值写进剪贴板，不依赖 DOM 节点是否可见、是否可选。但有硬性前提：
- 必须运行在 HTTPS 或
localhost环境下，HTTP 页面调用会静默失败（不是报错，是 Promise 永远不 resolve 也不 reject） - 必须由用户手势触发：
click、keydown（且event.isTrusted === true），不能在setTimeout、fetch.then或页面加载时自动执行 - 传入值必须是字符串，
undefined、null、对象会转成"undefined"、"null"、"[object Object]"
示例：复制一个动态生成的 API Key
const apiKey = `sk-${Math.random().toString(36).substr(2, 12)}`;
document.getElementById('copy-btn').addEventListener('click', async () => {
try {
await navigator.clipboard.writeText(apiKey);
} catch (err) {
// 常见 err.name：NotAllowedError（非手势）、SecurityError（非安全上下文）、AbortError（用户拒绝权限）
console.error(err.name, err.message);
}
});
复制前要确保内容已就绪，别抄“空值”
动态内容常在异步操作后才出现，比如从 fetch 拿到数据、或等某个 Promise resolve。如果按钮点击时目标变量还没赋值，就会复制空字符串或默认值。
常见错误场景：
- 按钮绑定了全局函数，但该函数读取的是尚未更新的变量（如
let token = '';，后来才被token = res.token覆盖） - 复制逻辑放在
DOMContentLoaded里，但实际内容由后续fetch渲染，此时 DOM 已存在但文本为空 - 用了
textContent读取元素，但元素内容是通过innerHTML插入的富文本，导致换行/空格丢失
正确做法：把复制动作和内容生成逻辑绑定在同一作用域，或确保读取时机晚于内容写入。例如：
// ✅ 内容生成后，立即启用对应按钮
async function loadToken() {
const res = await fetch('/api/token');
const token = await res.text();
document.getElementById('token-display').textContent = token;
document.getElementById('copy-token').disabled = false; // 解锁按钮
}
document.getElementById('copy-token').addEventListener('click', () => {
const text = document.getElementById('token-display').textContent;
navigator.clipboard.writeText(text);
});
兼容旧浏览器必须 fallback，但 execCommand 有隐藏限制
如果还要支持 Safari 15.6 以下、IE11 或某些安卓 WebView，得降级到 document.execCommand('copy')。但它不是简单“多写一段 else”，而是有真实运行约束：
-
必须插入到document.body中，且不能是display: none、visibility: hidden或opacity: 0—— Safari 和部分 Android 浏览器会静默失败 - 必须显式调用
select()或setSelectionRange(0, el.value.length)，只设value不够 - Chrome 90+ 在非用户手势下调用会发警告，Firefox 87+ 已完全禁用非手势调用
所以 fallback 不是“加个 try/catch 就完事”，而要重写整个流程：
async function copyText(text) {
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(text);
}
// fallback：创建并操作 textarea
const el = document.createElement('textarea');
el.value = text;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px'; // 不用 display:none
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
}
移动端 Safari 对 HTML 复制完全不支持
如果你试图用 navigator.clipboard.write() 复制带样式的 HTML（比如 标题），Safari（所有版本）都不支持 text/html MIME 类型，连降级都做不到——它只会忽略整个 ClipboardItem，不报错也不复制。
这意味着：只要目标用户包含 iOS 用户，就别尝试复制 HTML 片段。只能做两件事：
- 统一降级为纯文本：用
textContent提取文字，走writeText() - 对 Safari 单独提示：“已复制纯文本，样式无法保留”
判断 Safari 的廉价方式（不用 UA）：
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (isSafari) {
// 强制走纯文本路径，跳过 write()
}
真正麻烦的从来不是“怎么写那几行代码”，而是动态内容的时间差、安全上下文的隐性限制、以及 Safari 对标准的单方面放弃——这些点漏掉一个，按钮就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
