1. 程式人生 > >【轉載】js訪問系統剪貼簿

【轉載】js訪問系統剪貼簿

問題描述

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 選項 -> 安全 -> 自定義級別” 步驟可以設定剪貼簿訪問提示。
IE7, IE8


下表列出了其他非 IE 的主流瀏覽器對訪問剪貼簿的支援情況:

Chrome Safari Clipboard 物件
雖能看到存在此介面,但其內的方法並未實現其功能,所以在 JavaScript 中無法呼叫。
Opera 無操作剪貼簿的物件。
Firefox Firefox 中由於對使用者許可權設定較高,需要修改 Firefox 的配置檔案以允許瀏覽器支援剪貼簿操作。較通用的做法是:
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert("被瀏覽器拒絕!\n請在瀏覽器位址列輸入'about:config'並回車\n然後將 '
signed.applets.codebase_principal_support'設定為'true'");
}
在訪問剪貼簿上,首先修改 Firefox 的配置檔案,若無法修改,則通知使用者自行進入管理介面修改配置檔案引數。然後才有許可權對剪貼簿進行操作。
var clip = Components.classes['@mozilla.org/widget/clipboard;1']
.createInstance(Components.interfaces.nsIClipboard);
if (!clip)
return;
var trans = Components.classes['@mozilla.org/widget/transferable;1']
.createInstance(Components.interfaces.nsITransferable);
if (!trans)
return;
trans.addDataFlavor('text/unicode');
var str = new Object();
var len = new Object();
var str = Components.classes["@mozilla.org/supports-string;1"]
.createInstance(Components.interfaces.nsISupportsString);
var copytext = txt;
str.data = copytext;
trans.setTransferData("text/unicode",str,copytext.length*2);
var clipid = Components.interfaces.nsIClipboard;
if (!clip)
return false;
clip.setData(trans,null,clipid.kGlobalClipboard);
alert(" 複製成功!")

解決方案

  • 判斷瀏覽器型別,若不是 IE 則彈出提示,告訴使用者當前瀏覽器不能訪問剪貼簿。如:
    if (navigator.userAgent.indexOf("MSIE") == -1)
    {
    alert("您的瀏覽器不支援此功能,請手工複製文字框中內容");
    return false;
    }
  • 如果必須要實現跨瀏覽器的剪貼簿訪問,可考慮調使用 Flash 與 JS 通訊方式來解決。如:
    Zero Clipboard