JavaScript 中 BOM 怎么使用 Clipboard API 实现网页端剪贴板读写-js教程-PHP中文网

bom本身不提供剪贴板接口，现代浏览器通过安全、异步的clipboard api实现读写，需https/localhost环境及用户手势触发；writetext/readtext处理文本，write/read支持富媒体但兼容性有限；须捕获notallowederror等错误并考虑降级方案。

javascript 中 bom 怎么使用 clipboard api 实现网页端剪贴板读写

JavaScript 中 BOM（Browser Object Model）本身不直接提供剪贴板操作接口，但现代浏览器通过 Clipboard API（属于 Web API，由 BOM 环境暴露）实现了安全、异步的剪贴板读写能力。它替代了已废弃的 document.execCommand('copy')，需在安全上下文（HTTPS 或 localhost）中运行，且通常需要用户手势触发（如点击事件）。

写入剪贴板（copy）

使用 navigator.clipboard.writeText() 可写入纯文本；若需写入富文本或图片，需用更底层的 write() 方法（兼容性稍弱）。

仅支持 HTTPS 或 localhost，HTTP 站点会静默失败或抛出 SecurityError
必须在用户交互（如 click、keydown）回调中调用，否则可能被浏览器拒绝
返回 Promise，成功无返回值，失败时 reject 错误（如用户拒绝权限、复制失败）

示例：

```js
button.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('Hello from Clipboard API!');
    console.log('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
  }
});
```

读取剪贴板（paste）

使用 navigator.clipboard.readText() 获取当前剪贴板中的纯文本内容。

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

同样受安全上下文和用户手势限制（部分浏览器允许在粘贴事件中调用，但主动读取仍建议绑定到用户操作）
读取敏感内容（如图片、HTML）需额外权限，且需手动解析 read() 返回的 ClipboardItem
移动端 Safari 对 readText() 支持良好，但 read() 仍受限

示例：

```js
pasteBtn.addEventListener('click', async () => {
  try {
    const text = await navigator.clipboard.readText();
    input.value = text;
  } catch (err) {
    console.error('读取失败:', err);
  }
});
```

处理 HTML 或图片等富内容

使用 navigator.clipboard.write() 和 read() 可操作多种类型数据，但需构造/解析 ClipboardItem。

write() 接收 ClipboardItem 数组，每个项可包含多个 MIME 类型（如 'text/html'、'image/png'）
read() 返回 ClipboardItem[]，需遍历并调用 getType() 获取 Blob 内容
注意：跨浏览器支持不一，Chrome 和 Edge 支持最全，Firefox 需启用实验性功能，Safari 仅支持文本

简单 HTML 复制示例：

```js
await navigator.clipboard.write([
  new ClipboardItem({
    'text/plain': new Blob(['Plain text'], {type: 'text/plain'}),
    'text/html': new Blob(['Bold text'], {type: 'text/html'})
  })
]);
```

权限与错误处理建议

Clipboard API 操作可能因权限、上下文或用户设置失败，应主动检测并友好提示。

可用 navigator.permissions.query({name: 'clipboard-read'}) 或 'clipboard-write' 预检权限状态（仅部分浏览器支持）
捕获常见错误：NotAllowedError（缺少手势）、SecurityError（非安全上下文）、NotFoundError（无对应 MIME 类型）
降级方案：对不支持 Clipboard API 的旧浏览器，可回退到 document.execCommand('copy')（需配合 <textarea></textarea> 临时聚焦）