chrome瀏覽器下JavaScript實現clipboard時無法訪問剪切板解決方案

     在用JavaScript實現某個簡單的復制到剪切板功能的時候，會考慮一下瀏覽器兼容性，主要是重點在IE和FireFox,把這個兩個瀏覽器搞定后，基本上其他瀏覽器也不用太操心了，Chrome也一樣，沒出什么問題。但是Chrome用的好好的，突然過了一個月，就無法實現復制到剪切板了。一時不知道什么原因。網上查了一下，有這樣一原因：安全問題，瀏覽器默認禁止訪問剪貼板。

　　從代碼層面，想了各種方法，去解決兼容性，都無濟於事，就是解決不了Chrome的兼容性。

       貼一下JavaScript一款通用的復制粘貼方法，引用clipboard類庫，再去實現。具體大家可以參考一下

https://clipboardjs.com/

   

 

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

 

后來仔細想想，問題應該不在代碼層面，於是就從瀏覽器默認設置里面去查找問題。

有一種說法是，要必須利用JavaScript + flash來實現復制粘貼，解決兼容性，看了一下，這方方法很復雜。於是就從flash方面下手。

允許瀏覽器默認設置里面的flash加載即可。

 

 

 

 

 

 

這樣可以從技術上解決這個問題。

但是在業務人員使用的時候，可能不知道這么做，可以加上一個業務上的友好提示：

clipboard.on('success', function(e) {
//復制粘貼成功回調函數。代碼執行到這里，說明可以chrome設置成功
//成功后則寫入本地
window.localStorage.setItem("chromeAllowFlash","true");

}

然后，在具體點擊復制到剪切板的時候，前面加一個判斷：

var chromeAllowFlash = window.localStorage.getItem("chromeAllowFlash");
                        //解決chrome瀏覽器由於安全原因，禁止腳本訪問剪切板的問題
                        if(navigator.userAgent.indexOf("Chrome")>-1 && !chromeAllowFlash){
                            alert("如果chrome瀏覽器復制失敗，請在[設置]-[高級設置]-[內容設置]-[Flash]設置下，設置允許Flash，關閉[先詢問]");
                        }

以上，僅供參考。