document.execcommand(‘copy‘) 复制不成功 不同浏览器兼容问题 -凯发ag旗舰厅登录网址下载

前几天遇到了一个js复制在不同浏览器下行为不同问题，花了几个小时看问题，最后发现竟然是js在ajax中执行剪切板操作会有问题。
场景是这样的：复制的内容是可配置的，所以进行复制操作前需要进行请求。
具体问题：复制操作在chrome浏览器和360浏览器上是正常的，在qq浏览器和uc浏览器上复制不成功。

实现复制主要代码：

// for ie if (window.clipboarddata) {window.clipboarddata.cleardata();window.clipboarddata.setdata('text', value); } // for modern browser else if (document.execcommand) {var element = document.createelement('span');element.textcontent = value;document.body.appendchild(element);if (document.selection) {var range = document.body.createtextrange();range.movetoelementtext(element);range.select();} else if (window.getselection) {var range = document.createrange();range.selectnode(element);window.getselection().removeallranges();window.getselection().addrange(range);}document.execcommand('copy');element.remove ? element.remove() : element.removenode(true); }

这段代码是没有问题的。后来发现在qq浏览器和uc浏览器下document.execcommand('copy')返回值都为false。由于有的浏览器可以，有的浏览器不行，所以最开始一直没往ajax上考虑影响。后来发现如果在qq浏览器上获取过一次配置（项目中对配置做了前端缓存），后面的复制操作就正常了。这才想到了是不是异步会对js复制操作有影响。

参考以下链接
https://www.jianshu.com/p/63442f81ed7e?tdsourcetag=s_pctim_aiomsg
https://stackoverflow.com/questions/31925944/execcommandcopy-does-not-work-in-ajax-xhr-callback

you can only trigger a copy to the system clipboard in direct response to a trusted user action, such as a click event.

这两篇文章大致是说：
document.execcommand()这个api只能在真正的用户操作之后才能被触发，是为了安全考虑。原理大致是这样的，当用户操作之后，chrome会将当前作用域下的useraction变量置为true，然后执行execcommand时就会去读取这个变量，当为true的时候才可以执行。而ajax是因为ajax基本都是异步请求，而异步请求不同于同步请求的地方就在于重新创建了一个作用域去执行回调函数。所以在重新创建一个作用域之后，之前作用域内的useraction就失效了，当前作用域下的useraction为false，所以复制不成功。

但是结合我们的场景，上面的说法也不是绝对的，毕竟在有些浏览器下也是没问题的。最后可以总结：
由于浏览器实现不同，document.execcommand()在某些浏览器下不支持异步操作。

官方规范

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的document.execcommand(‘copy‘) 复制不成功 不同浏览器兼容问题的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。