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

實(shí)現(xiàn)復(fù)制主要代碼：

// 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瀏覽器上獲取過一次配置（項(xiàng)目中對(duì)配置做了前端緩存），后面的復(fù)制操作就正常了。這才想到了是不是異步會(huì)對(duì)js復(fù)制操作有影響。

參考以下鏈接
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()這個(gè)api只能在真正的用戶操作之后才能被觸發(fā)，是為了安全考慮。原理大致是這樣的，當(dāng)用戶操作之后，chrome會(huì)將當(dāng)前作用域下的userAction變量置為True，然后執(zhí)行execCommand時(shí)就會(huì)去讀取這個(gè)變量，當(dāng)為True的時(shí)候才可以執(zhí)行。而ajax是因?yàn)閍jax基本都是異步請(qǐng)求，而異步請(qǐng)求不同于同步請(qǐng)求的地方就在于重新創(chuàng)建了一個(gè)作用域去執(zhí)行回調(diào)函數(shù)。所以在重新創(chuàng)建一個(gè)作用域之后，之前作用域內(nèi)的userAction就失效了，當(dāng)前作用域下的userAction為false，所以復(fù)制不成功。

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

官方規(guī)范

總結(jié)

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

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