1. 程式人生 > >chrome瀏覽器下JavaScript實現clipboard時無法訪問剪切板解決方案

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

簡單 訪問 什麽 原因 .get 失敗 利用 ext 友好

在用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,關閉[先詢問]");
                        }

以上,僅供參考。

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