【轉載】js訪問系統剪貼簿
阿新 • • 發佈:2019-02-03
問題描述
IE 支援使用 window.clipboardData 物件內的一系列方法訪問系統剪貼簿;
Chrome 和 Safari 中存在類似的 Clipboard 物件,且有與 IE 中類似的方法,但其功能尚未實現;
Firefox 和 Opera 不支援這類物件。
造成的影響
若作者在需要訪問剪貼簿時僅僅考慮 IE 瀏覽器而使用了其專有的 clipboardData 物件,則在其他瀏覽器中可能導致功能無效且程式碼報錯。
受影響的瀏覽器
非 IE 瀏覽器 |
---|
問題分析
現代作業系統中均提供了系統剪貼簿(clipboard),它允許使用者在不同的執行中的應用程式之間傳遞不同型別的資料。如:複製、貼上等等。剪貼簿已經成為最常用的一種不同程序間交換資料的方式。
有時候頁面作者在 HTML 頁面中也希望可以通過某種方式能否有權訪問系統剪貼簿,但處於安全的考慮,不是所有瀏覽器都提供實現訪問剪貼簿的介面。
如以下程式碼:
<script>
window.clipboardData.setData("Text", "Hello");
</script>
上面的程式碼只有在 IE 中可以將“hello”這個字串複製到作業系統的剪貼簿中,“Text”表明作為文字,在其他瀏覽器中則產生如下報錯:
Firefox | window.clipboardData is undefined |
---|---|
Chrome | Uncaught TypeError: Cannot call method 'setData' of undefined |
Safari | TypeError: Result of expression 'window.clipboardData' [undefined] is not an object. |
Opera | Statement on line 2: Cannot convert undefined or null to Object stacktrace |
出現此錯誤是因為 window.clipboardData 為 IE 專有,其他瀏覽器均沒有此物件。更多關於 clipboardData 物件,參見 MSDN:clipboardData Object。
在 IE7 及更高版本的 IE 瀏覽器中,預設情況下會出現訪問剪貼簿的提示,通過瀏覽器選單“工具 -> internet 選項 -> 安全 -> 自定義級別” 步驟可以設定剪貼簿訪問提示。
下表列出了其他非 IE 的主流瀏覽器對訪問剪貼簿的支援情況:
Chrome Safari | Clipboard 物件: 雖能看到存在此介面,但其內的方法並未實現其功能,所以在 JavaScript 中無法呼叫。 |
---|---|
Opera | 無操作剪貼簿的物件。 |
Firefox | Firefox 中由於對使用者許可權設定較高,需要修改 Firefox 的配置檔案以允許瀏覽器支援剪貼簿操作。較通用的做法是: try {在訪問剪貼簿上,首先修改 Firefox 的配置檔案,若無法修改,則通知使用者自行進入管理介面修改配置檔案引數。然後才有許可權對剪貼簿進行操作。 var clip = Components.classes['@mozilla.org/widget/clipboard;1'] |
解決方案
- 判斷瀏覽器型別,若不是 IE 則彈出提示,告訴使用者當前瀏覽器不能訪問剪貼簿。如:
if (navigator.userAgent.indexOf("MSIE") == -1)
{
alert("您的瀏覽器不支援此功能,請手工複製文字框中內容");
return false;
} - 如果必須要實現跨瀏覽器的剪貼簿訪問,可考慮調使用 Flash 與 JS 通訊方式來解決。如:
Zero Clipboard