JavaScript剪贴板API需在HTTPS或localhost安全上下文中，由用户手势触发；writeText()和readText()均返回Promise，支持文本读写，Chrome 115+实验性支持图片写入，Safari读取受限，建议检查权限并兼容降级。
JavaScript 剪贴板 API（navigator.clipboard）可以安全地读写系统剪贴板，但必须在安全上下文（HTTPS 或 localhost）中运行，且需要用户主动触发（比如点击事件），不能自动执行。
写入文本到剪贴板
调用 clipboard.writeText() 方法，返回 Promise：
- 成功时 resolve，无返回值
- 失败时 reject（如权限被拒、非用户手势触发）
示例：
button.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('Hello, world!');
console.log('已复制到剪贴板');
} catch (err) {
console.error('复制失败:', err);
}
});
读取文本内容
使用 clipboard.readText()，同样返回 Promise：
立即学习“Java免费学习笔记（深入）”；
- 仅支持纯文本，不支持 HTML 或富文本（除非手动解析）
- 部分浏览器（如 Safari）可能限制读取，需明确用户授权
示例：
button.addEventListener('click', async () => {
try {
const text = await navigator.clipboard.readText();
console.log('剪贴板内容:', text);
} catch (err) {
console.error('读取失败:', err);
}
});
处理权限与兼容性
不是所有浏览器都默认允许剪贴板访问，建议检查权限状态：
- 用
navigator.permissions.query({ name: 'clipboard-read' })或'clipboard-write'查询 - Chrome/Edge 94+ 支持无提示写入（只要在用户手势内）；读取仍可能弹权限请求
- Safari 对
readText()限制较严，有时会静默拒绝 - 旧版可用
document.execCommand('copy')降级（需配合<textarea>操作，已废弃但仍有兼容价值）
写入图片（实验性支持）
Chrome 115+ 支持 clipboard.write() 写入图片 Blob：
- 需构造
ClipboardItem，传入{ 'image/png': blob }等格式 - 目前仅限 PNG/JPEG，且需用户手势 + 安全上下文
- 暂不推荐生产环境依赖，可用作增强体验
示例片段：
const blob = await fetch('logo.png').then(r => r.blob());
await navigator.clipboard.write([
new ClipboardItem({ 'image/png': blob })
]);
基本上就这些。核心原则：用户触发、HTTPS、处理 Promise 异常、兼顾老浏览器可选降级。不复杂但容易忽略上下文和权限细节。
