浏览器原生不支持clipboardchange事件，因安全限制禁止后台窃取剪贴板；仅能在用户手势触发、https环境及获clipboard-read权限后，通过定时轮询readtext()并比对哈希实现折中监听。
浏览器原生不提供 clipboardchange 事件，所谓“监听剪贴板变化”必须通过折中方案实现——核心是用定时轮询 + navigator.clipboard.readText() 检测内容变更，且仅在用户交互后首次获得权限时才可行。
为什么没有真正的 clipboardchange 事件
Chrome、Firefox 等主流浏览器明确不支持 clipboardchange 这类全局监听事件。这是出于安全限制：防止网页在后台静默窃取用户剪贴板内容。所有剪贴板读取操作都必须满足两个硬性条件：
- 调用发生在用户手势触发的事件回调内（如
paste、click、keydown） - 页面处于 HTTPS（或
localhost）环境 - 已通过
Permissions API显式请求并获得"clipboard-read"权限
一旦离开用户交互上下文，后续任何 navigator.clipboard.readText() 调用都会直接抛出 "NotAllowedError"。
可行的轮询检测方案（含防抖与降级）
若你确实需要“感知剪贴板内容是否变了”，唯一稳定路径是：在用户完成一次合法粘贴/点击后，启动轻量轮询，并对比上一次读到的文本哈希值。注意以下实操要点：
- 轮询间隔建议 ≥ 300ms，太密会触发浏览器节流，且无实际收益
- 每次
readText()前先用document.hasFocus()判断页面是否激活，非激活状态直接跳过 - 必须捕获
NotAllowedError并停止轮询——这代表用户已切换标签页或失焦 - 为兼容旧版 Safari（不支持
navigator.clipboard），需 fallback 到监听paste事件本身，但该方式无法感知非粘贴引发的剪贴板变更（如其他应用复制）
示例代码片段：
let lastHash = '';
let pollId = null;
async function startClipboardPolling() {
if (!navigator.clipboard) return;
const check = async () => {
if (!document.hasFocus()) return;
try {
const text = await navigator.clipboard.readText();
const hash = md5(text); // 用任意轻量哈希函数
if (hash !== lastHash) {
lastHash = hash;
console.log('剪贴板内容已变更:', text.slice(0, 50));
// 触发你的业务逻辑
}
} catch (err) {
if (err.name === 'NotAllowedError') {
clearInterval(pollId);
pollId = null;
}
}
};
pollId = setInterval(check, 300);
}
// 在用户点击按钮后调用
document.getElementById('watch-btn').addEventListener('click', () => {
startClipboardPolling();
});
Tauri 桌面应用可绕过部分限制
如果你开发的是 Tauri 桌面应用，情况完全不同：@tauri-apps/plugin-clipboard-manager 插件在启用 readText 权限后，允许在任意时机调用 readText() 或 readHtml()，无需用户手势上下文。
- 配置需在
tauri.conf.json中显式开启："clipboard": { "readText": true, "readHtml": true } - Rust 层直接访问系统剪贴板，不受浏览器同源/HTTPS/焦点限制
- 但仍需注意 Windows 的
CF_HTML格式解析细节：返回的 HTML 字符串可能包含完整文档头、前后上下文，真正可用的片段被<!--StartFragment-->和<!--EndFragment-->包裹，需手动提取
也就是说，在桌面端你可以做真·监听，但得自己处理 CF_HTML 解析逻辑；而在浏览器里，你永远只能“猜”——靠轮询+权限窗口期+用户配合。
真正容易被忽略的点是：轮询不是万能的，它只对「用户刚授予权限且页面保持活跃」这一窄窗口有效；一旦用户切走、刷新、或关闭标签，整个机制就失效了。别把它当 Webhook 用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
