Promise 处理剪贴板读取需满足安全上下文（HTTPS/localhost）和用户手势触发，否则抛 SecurityError；read() 返回 ClipboardItem 数组，需遍历 getType('text/plain') 或 'text/html' 并解析，统一封装为可复用异步函数。
JavaScript 中使用 Promise 处理剪贴板读取，核心在于 navigator.clipboard.read() 本身返回 Promise，并且必须在安全上下文（HTTPS 或 localhost）中、由用户手势（如 click、keydown）触发，否则会直接拒绝。
确保调用满足安全前提
浏览器强制要求剪贴板读取需满足两个条件：页面运行在安全上下文，且调用发生在用户交互事件处理函数内。否则 Promise 会立即以 SecurityError 拒绝。
- 检查是否为 HTTPS 或
localhost：可通过location.protocol === 'https:' || location.hostname === 'localhost' - 必须绑定到用户手势事件，例如：
button.addEventListener('click', handlePaste)，不能在页面加载或定时器中直接调用 - 避免在异步回调（如 setTimeout、fetch.then）中调用，除非该回调仍处于同一用户交互的“事件委托链”中（现代浏览器对“交互延续性”有一定宽松，但不可依赖）
正确读取文本与富文本内容
read() 返回的是 ClipboardItem 数组，需遍历并调用其 getType() 方法获取实际数据。不同 MIME 类型需分别处理，常见的是 text/plain 和 text/html。
- 先尝试读取
text/plain：调用item.getType('text/plain')，返回 Promise，resolve 后用.text()获取字符串 - 若失败（如剪贴板无纯文本），可降级尝试
text/html，再用 DOMParser 解析提取文本 - 注意：
item.types是只读数组，可用于预判支持类型，但实际读取仍需getType()
统一封装为可复用的 Promise 工具函数
把权限检查、格式协商、错误分类封装成一个返回 Promise 的函数，提升可维护性：
立即学习“Java免费学习笔记（深入）”；
async function readClipboardText() {
if (!navigator.clipboard) throw new Error('Clipboard API not supported');
try {
const items = await navigator.clipboard.read();
for (const item of items) {
if (item.types.includes('text/plain')) {
const blob = await item.getType('text/plain');
return await blob.text();
}
if (item.types.includes('text/html')) {
const blob = await item.getType('text/html');
const html = await blob.text();
const doc = new DOMParser().parseFromString(html, 'text/html');
return doc.body.textContent || '';
}
}
throw new Error('No plain or HTML text found in clipboard');
} catch (err) {
if (err.name === 'NotAllowedError') {
throw new Error('Permission denied: user gesture required');
}
if (err.name === 'SecurityError') {
throw new Error('Not in secure context (HTTPS or localhost)');
}
throw err;
}
}
调用时直接 readClipboardText().then(text => {...}).catch(err => {...}) 即可，逻辑清晰，错误可读性强。
配合按钮实现安全、友好的粘贴体验
实际使用中，建议用按钮触发，并在 UI 上反馈状态（如禁用按钮、显示加载中），避免重复点击和用户体验断层：
- 按钮初始启用，点击后立即
button.disabled = true并更新文字为“正在读取…” - Promise resolve 后恢复按钮、插入内容、清空剪贴板（如需）或聚焦目标输入框
- reject 时显示具体错误提示（如“请手动复制文本后再点击”或“请在 Chrome/Firefox 中重试”），不暴露底层异常名
- 可选：添加
AbortController支持超时控制（虽然 read() 本身不接受 signal，但可在外部加 timeout 包裹）
