前幾天遇到了一個js復制在不同瀏覽器下行為不同問題，花了幾個小時看問題，最后發(fā)現(xiàn)竟然是js在ajax中執(zhí)行剪切板操作會有問題。
場景是這樣的：復制的內(nèi)容是可配置的，所以進行復制操作前需要進行請求。
具體問題：復制操作在chrome瀏覽器和360瀏覽器上是正常的，在QQ瀏覽器和UC瀏覽器上復制不成功。

實現(xiàn)復制主要代碼：

// 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); }

這段代碼是沒有問題的。后來發(fā)現(xiàn)在QQ瀏覽器和UC瀏覽器下document.execCommand('copy')返回值都為false。由于有的瀏覽器可以，有的瀏覽器不行，所以最開始一直沒往ajax上考慮影響。后來發(fā)現(xiàn)如果在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只能在真正的用戶操作之后才能被觸發(fā)，是為了安全考慮。原理大致是這樣的，當用戶操作之后，chrome會將當前作用域下的userAction變量置為True，然后執(zhí)行execCommand時就會去讀取這個變量，當為True的時候才可以執(zhí)行。而ajax是因為ajax基本都是異步請求，而異步請求不同于同步請求的地方就在于重新創(chuàng)建了一個作用域去執(zhí)行回調(diào)函數(shù)。所以在重新創(chuàng)建一個作用域之后，之前作用域內(nèi)的userAction就失效了，當前作用域下的userAction為false，所以復制不成功。

但是結合我們的場景，上面的說法也不是絕對的，畢竟在有些瀏覽器下也是沒問題的。最后可以總結：
由于瀏覽器實現(xiàn)不同，document.execCommand()在某些瀏覽器下不支持異步操作。

官方規(guī)范

總結

以上是生活随笔為你收集整理的document.execCommand(‘copy‘) 复制不成功 不同浏览器兼容问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。