小攻城師的戰場筆記

為了要在頁面上增加一個按鈕，讓使用者能夠複製網頁部分內容，因此參考黑暗執行緒《在Firefox中透過Javascript存取剪貼簿》，建立了copyToClipboard()這個函式。不過因為這篇文是 2009 年發表的，我發現在 IE8 以上版本執行起來會有問題：當使用者選擇「您是否要允許這網頁存取[剪貼簿]?」，使用者選了「不允許」，竟然還是會返回已複製成功的訊息。（若想模擬使用者的環境、把你的 IE 也設定成不允許程式存取剪貼簿，可參考《解決IE8不再詢問「您是否要允許這網頁存取剪貼簿?」》）

此外，現在 Chrome 的使用者聲勢浩大、但無法透過 JavaScript 存取剪貼簿，也得一併考慮進去。

改寫後的程式碼如下。

/*
 * @description 將文字內容複製到剪貼簿
 * @param txt 要複製到剪貼簿的內容
 * @return 傳回 boolean，以便得知是否成功複製到剪貼簿
 */
function copyToClipboard(txt) {
        // IE 可透過 window.cipboardData 物件，直接存取剪貼簿
        if(window.clipboardData) {
                // clearData() 方法可清除剪貼簿內容，會傳回 boolean
                window.clipboardData.clearData();
                // setData() 方法可將資料寫入剪貼簿，會傳回 boolean
                var result = window.clipboardData.setData("Text", txt);
                // 考慮 IE8 以後版本可關閉剪貼簿功能，因此須判別是否成功將內容寫入剪貼簿
                if (!result) { return false; }
        }
        // firefox 在 config 設定的情況下也可存取剪貼簿，但要考慮無法存取的情況
        else if (window.netscape) {
                try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); }
                catch (e) { return false; }
                var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
                if (!clip) { return false; }
                var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
                if (!trans) { return false; }
                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);
        }
        // chrome & safari 無法存取剪貼簿物件，所以直接傳回 false
        else { return false; }

        return true;
}

不排斥使用 flash 的人可以參考 rahul 的 "ExtJs - Copy GridPanel content to Clipboard"，裡面使用了一個 flash 元件來處理剪貼簿存取，我略試了一下，手邊的瀏覽器都能成功複製到內容。