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

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

Copy组件的包依赖关系

Copy组件的实现

本质就是Document创建一个不可见元素，填充文本，然后选中，执行document.execCommand('copy')，然后移除这个不可见元素。

问题

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判断是否全屏，全屏时不需要兜底了，直接提示用户。