关于网页剪贴板拷贝实效问题

关于网页剪贴板拷贝实效问题

9月 25, 2025 · 1 分钟阅读时长 · 449 字 · -阅读 -评论

最近一个项目用的腾讯tea组件,其中有个Copy组件,依赖的是copyToClipboard,而copyToClipboard依赖的是document.execCommand('copy'),这个API其实有坑,这里总结下。

问题

  1. document.execCommand(‘copy’),首先是不提倡使用了,但还是需要用,主要是其在浏览器没有赋予剪贴板Clipboard 权限时还能拷贝。
  2. document.execCommand(‘copy’),在Chrome全屏时无效,不报错,但不work。
  3. Clipboard作为新的API,在非HTTP S站点也是不支持的,因此比如内网站点,Clipboard也是不work的。

解决方案

  1. 优先使用Clipboard API,报错时拿document.execCommand(‘copy’)兜底。
  2. 利用document.fullscreenElement判断是否全屏,全屏时不需要兜底了,直接提示用户。
Alan He
Authors
开发者,数码产品爱好者,喜欢折腾,喜欢分享,喜欢开源