Clipboard API通过navigator.clipboard提供异步读写剪贴板功能，需在安全上下文和用户交互中调用；2. 使用writeText()和readText()方法实现复制粘贴，支持Promise处理；3. 需检查clipboard-write权限，并兼容旧浏览器降级至execCommand方案。
现代浏览器提供了 Clipboard API，让 JavaScript 能更安全、便捷地读写系统剪贴板。相比过去依赖 document.execCommand('copy') 的方式，新的 API 基于 Promise，支持异步操作，也更符合权限控制规范。
基本用法：读取和写入剪贴板
Clipboard API 主要通过 navigator.clipboard 提供 read 和 write 方法。常用的是 writeText() 和 readText()。
写入剪贴板（复制）：调用 writeText() 将文本写入剪贴板，需处理异步返回的 Promise。
navigator.clipboard.writeText("这是一段复制的内容")
.then(() => {
console.log("已复制到剪贴板");
})
.catch(err => {
console.error("复制失败:", err);
});
读取剪贴板（粘贴）：
使用 readText() 获取剪贴板中的纯文本内容。
立即学习“Java免费学习笔记（深入）”；
navigator.clipboard.readText()
.then(text => {
console.log("剪贴板内容:", text);
})
.catch(err => {
console.error("读取失败:", err);
});
安全性与权限要求
出于安全考虑，Clipboard API 只能在安全上下文中使用（即 HTTPS 或 localhost），且需要用户主动触发操作（如点击按钮）才能执行读写。
部分浏览器会请求权限，可通过 Permissions API 检查或请求授权。
// 检查是否有剪贴板写权限
navigator.permissions.query({ name: "clipboard-write" }).then(result => {
if (result.state === "granted" || result.state === "prompt") {
// 可以安全调用 writeText
}
});
兼容性与降级处理
虽然主流现代浏览器都支持 Clipboard API，但旧版本或某些移动浏览器可能不支持。建议添加 fallback 方案。
当 API 不可用时，可退回到传统的 execCommand 方法（已废弃但仍可用）。
async function copyText(text) {
if (navigator.clipboard) {
try {
await navigator.clipboard.writeText(text);
console.log("复制成功");
} catch (err) {
console.error("Clipboard API 复制失败", err);
fallbackCopyText(text);
}
} else {
fallbackCopyText(text);
}
}
function fallbackCopyText(text) {
const textarea = document.createElement("textarea");
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
console.log("已使用兼容方式复制");
}
基本上就这些。新 API 更简洁安全，推荐优先使用，同时保留兼容逻辑确保用户体验一致。注意始终在用户交互中调用，避免被浏览器拦截。
