navigator.clipboard 是现代浏览器中用于操作剪贴板的 API，属于 BOM 一部分但非 navigator 原生属性，需安全上下文（HTTPS/localhost），支持 Chrome 66+、Firefox 63+、iOS 13.4+，不支持旧版 IE；复制用 writeText()，读取需 readText() 及 clipboard-read 权限；应检测兼容性并降级至 execCommand 或临时 textarea 方案。
navigator.clipboard 是现代浏览器中用于操作剪贴板的 API，它属于 BOM（Browser Object Model）的一部分，但注意：它**不是 navigator 对象的原生属性**，而是通过 navigator.clipboard 访问的独立接口，需在安全上下文（HTTPS 或 localhost）中使用。
确认浏览器支持与权限
调用前应检查浏览器是否支持该 API，并确保页面处于安全上下文：
- 不支持旧版 IE、部分安卓 WebView 或低版本 Safari（iOS 13.4+、Chrome 66+、Firefox 63+ 支持良好）
- 必须通过 HTTPS 或
localhost访问，否则navigator.clipboard为undefined - 首次写入剪贴板时，浏览器会自动触发权限提示（用户需主动交互后才可调用，如点击按钮）
基本用法：复制纯文本
使用 navigator.clipboard.writeText() 可一键复制字符串：
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
console.log('复制成功');
} catch (err) {
console.error('复制失败:', err);
}
}
// 示例：绑定到按钮点击
document.getElementById('copyBtn').addEventListener('click', () => {
copyToClipboard('Hello, world!');
});
读取剪贴板内容（需用户授权）
读取需额外权限（clipboard-read），且仅支持文本（readText()）：
立即学习“Java免费学习笔记（深入）”；
- 调用
navigator.clipboard.readText()返回 Promise - 用户需已授予权限，或首次调用时弹出授权提示
- 常见于“粘贴内容预览”等场景
async function pasteFromClipboard() {
try {
const text = await navigator.clipboard.readText();
console.log('粘贴内容:', text);
} catch (err) {
console.error('读取失败:', err);
}
}
处理异常与降级方案
为兼容不支持 Clipboard API 的环境，建议 fallback 到 document.execCommand('copy')（已废弃但仍有兼容性）或提示用户手动复制：
- 先检测
navigator.clipboard是否可用 - 若不可用，创建临时
<textarea>并聚焦后执行execCommand - 复制完成后及时移除临时元素并恢复焦点
实际项目中推荐使用成熟库（如 clipboard-copy）或封装健壮的工具函数，避免重复处理边界情况。
