17370845950

JavaScript剪贴板交互主要通过Clipboard API实现，需用户手势触发且要求HTTPS；writeText()和readText()用于纯文本读写，返回Promise；富文本或图片需用write()/read()配合ClipboardItem；现代浏览器广泛支持但存在兼容性差异。

JavaScript 中的剪贴板交互现在主要通过 Clipboard API 实现，它比旧的 document.execCommand('copy') 更安全、更可控，且无需依赖输入框或选中内容。核心是 navigator.clipboard 对象，但需注意权限和使用场景。

基础用法：复制文本到剪贴板

调用 navigator.clipboard.writeText() 即可写入纯文本。该方法返回 Promise，成功则无返回值，失败会抛出错误。

• 必须在用户手势（如点击、键盘事件）触发的上下文中调用，否则浏览器会拒绝（例如不能在页面加载时直接执行）
• 页面需为 HTTPS（本地开发环境 localhost 也允许）
• 示例：

读取剪贴板中的文本

使用 navigator.clipboard.readText() 获取当前剪贴板文本内容，同样返回 Promise。

• 需要用户主动触发（如点击“粘贴”按钮），不能自动读取
• 部分浏览器（如 Safari）可能要求额外权限或仅支持安全上下文下的显式请求
• 注意：读取操作可能被用户拒绝，务必处理 Promise rejection

读写富文本或图片（进阶）

writeText() 和 readText() 只处理纯文本。如需复制 HTML、图片等，需用更底层的 write() 和 read() 方法。

• write() 接收一个 ClipboardItem 数组，每个项可包含多种 MIME 类型数据（如 'text/html'、'image/png'）
• 写入图片需先获取 Blob（例如从 导出），再构造 ClipboardItem
• 读取非文本内容需检查 types 并调用 getType() 获取对应 Blob

权限与兼容性注意事项

Clipboard API 在现代浏览器中已广泛支持（Chrome 66+、Firefox 63+、Edge 79+、Safari 16.4+），但仍有细节差异：

• 首次调用读/写前，浏览器可能弹出权限提示（尤其在非安全上下文或跨源 iframe 中）
• Safari 对 read() 的限制较严，建议优先使用 readText() 并降级处理
• 可提前检测支持性：if ('clipboard' in navigator)
• 对旧版浏览器，可保留 execCommand 作为 fallback（需临时创建 并选中）