chrome瀏覽器下JavaScript實現clipboard時無法訪問剪切板解決方案
阿新 • • 發佈:2017-07-25
簡單 訪問 什麽 原因 .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時無法訪問剪切板解決方案