JavaScript剪贴板API使用详解

学习文章要努力，但是不要急！今天的这篇文章《JavaScript剪贴板API使用教程》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

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：

• 仅支持纯文本，不支持 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 异常、兼顾老浏览器可选降级。不复杂但容易忽略上下文和权限细节。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。