javascript 中 bom 本身不提供剪贴板操作能力，需通过安全上下文中的 navigator.clipboard api 实现；必须由用户手势（如点击）触发，支持 readtext() 读文本和 read() 读富文本/图片，需处理兼容性与 notallowederror 等错误。
JavaScript 中 BOM（Browser Object Model）本身不直接提供剪贴板操作能力，而是通过 navigator.clipboard 这个 Web API 接口来实现读取剪贴板数据。该接口属于 Permissions API 的一部分，必须在安全上下文（HTTPS 或 localhost）中运行，且需要用户主动触发（如点击事件），不能在页面加载或定时器中静默调用。
需要用户手势触发
浏览器出于安全考虑，禁止页面在无用户交互时访问剪贴板。这意味着 navigator.clipboard.readText() 或 read() 必须绑定在明确的用户动作上，比如按钮点击：
- ✅ 正确：绑定在
button.addEventListener('click', ...) - ❌ 错误：放在
window.onload、setTimeout或自动执行的函数里
支持读取纯文本和富文本/图片（需权限）
目前主流浏览器支持以下方式：
-
读取纯文本：直接调用
navigator.clipboard.readText()，返回 Promise -
读取任意格式（如 HTML、图片）：用
navigator.clipboard.read()，返回ClipboardItem[]，需遍历 items 并调用item.getType('text/html')或item.getType('image/png')获取 Blob - 注意：读取非文本类型（尤其是图片）可能需要额外权限，部分浏览器会弹出权限提示
处理兼容性与错误
不是所有环境都支持 navigator.clipboard，需做判断和降级：
- 先检查是否存在：
if (!navigator.clipboard)→ 提示不支持或使用 document.execCommand（已废弃，仅作兜底） - 捕获常见错误：
NotAllowedError（未授权/非用户触发）、PermissionDenied（用户拒绝）、ReadPermissionDenied（读取被拒） - 建议配合
navigator.permissions.query({name:'clipboard-read'})预判权限状态（但 query 结果不一定实时准确）
基本调用示例（文本读取）
一个最小可用示例：
document.getElementById('pasteBtn').addEventListener('click', async () => {
try {
const text = await navigator.clipboard.readText();
console.log('粘贴板文本：', text);
} catch (err) {
console.error('读取失败：', err.name, err.message);
}
});
注意：确保页面部署在 HTTPS 或 localhost，否则 navigator.clipboard 为 undefined。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
