跳转到主内容
极星编程网:以代码为星,赴技术山海!

HTML中如何使用Clipboard API写入剪贴板内容

navigator.clipboard.writeText() 写入失败的常见原因包括:非安全上下文(非HTTPS且非localhost)、非用户手势触发、异步延迟调用、iframe缺失allow="clipboard-write"属性、浏览器权限静默拒绝、文档未聚焦或标签页非活跃,以及Safari等浏览器需额外权限声明或不支持。 Clipboard API 写入失败的常见原因 调用
navigator.clipboard.writeText()
报错 “Failed to execute 'writeText' on 'Clipboard': Document is not focused or permission denied”,基本是因为当前上下文不满足安全要求:页面必须是 HTTPS(本地
http://localhost
除外),且调用必须由用户手势(如
click
、
keydown
)触发,不能在异步回调(如
setTimeout
、
fetch.then
)中直接调用。 如何正确调用 writeText() 并处理拒绝情况 必须包裹在用户事件监听器中,并显式捕获 Promise 拒绝。浏览器不会自动弹出权限提示,而是静默拒绝——只有首次调用时可能触发权限请求(取决于 UA 实现),但更常见的是直接 reject。 使用
button.addEventListener('click', async () => { ... })
,而非
onload
或定时器 必须用
try/catch
或
.catch()
处理失败,例如用户禁用了剪贴板权限或处于 iframe 无权限上下文 不要假设
navigator.clipboard
一定存在:Safari 13.1+ 和旧版 Android WebView 不支持,需降级到
document.execCommand('copy')
(仅限文本) 示例:
button.addEventListener('click', async () => { try { await navigator.clipboard.writeText('Hello, world!'); console.log('Copied'); } catch (err) { console.error('Copy failed:', err.name); // 可能是 'NotAllowedError' 或 'SecurityError' } });
writeText() 与 execCommand('copy') 的关键区别
writeText()
是现代标准,支持跨域 iframe(若启用
clipboard-write
权限策略),而
document.execCommand('copy')
已废弃,依赖