Sunday, June 21, 2009 - 文章

在Firefox中透過Javascript存取剪貼簿

在上一篇強化程式範例複製功能裡，其實迴避了一個問題: 使用者真正想要的操作是點一下就搞定呀! "點一下->Ctrl-A->Ctrl-C"的操作步驟肯定會被嫌棄。不過，據我先前的了解，存取剪貼簿的Javascript存在跨瀏覽器的問題，除了IE內建支援外，其他瀏覽器等靠另嵌Flash物件達成，以前找到的解決方案在Flash Player 10改變剪貼篿存取政策後就壞了，我也一直發懶沒去找替代方案。無法解決IE以外瀏覽器的複製功能，獨厚IE必會引發民怨，為了公平起見，索性就不加自動複製功能了。(謎之聲: 真的是因為這樣嗎? 懶鬼!)

琛哥說，出來混，遲早是要還的。

果不其然，貼文不到幾小時，自以為天衣無縫的裝死行徑立刻被眼尖網友識破，只好乖乖出來誠實面對。

爬了一下文，很幸運地找到了一個Frefox的解決方案，不需引用額外的Flash，只要調整Firefox的signed.applets.codebase_principal_support安全設定即可支援。
(警告: 啟用該選項會增加資安風險，但就我的理解，它所開放的範圍限於經電子簽章簽署過的元件，應無重大漏洞。但各位仍應依自己的資安原則，斟酌是否使用。)

我已在網站加上複製文字的功能。在IE裡可以直接服用，Firefox則需要透過以下的步驟調整設定，至於其他瀏覽器，我則悍然決定繼續裝死。(如果有人知道解決方案，歡迎提供)

在Firefox網址列輸入”about:config”，會先出現警告訊息。(題外話，這個警告訊息的用字深得我心呀!)

在篩選條件輸入signed就可以馬上找到該選項，將值由false改成true。

如此，在Firefox也可以享受直接打包帶走的服務囉!

以下是我偷學到的剪貼簿複製函數，順手貼出來供有興趣研究的熱血青年參考:

//Copy to clipboard: ref http://forum.moztw.org/viewtopic.php?p=131407

function copyToClipboard(txt) {

    var copied = false;

     if(window.clipboardData) {

        window.clipboardData.clearData();

        window.clipboardData.setData("Text", txt);

        copied = true;

     } else if (window.netscape) {

        try {

           netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");

        } catch (e) {

           alert("被瀏覽器拒絕！\n請在瀏覽器網址列輸入'about:config'\n，將'signed.applets.codebase_principal_support'設為'true'");

        }

        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);

        copied = true;

     }

     if (copied) alert('文字內容已複製到剪貼簿中!');

     else alert("使用的瀏覽器不支援文字複製功能!");

}    

Posted 21 June 2009 01:46 PM 由 Jeffrey | 4 comment(s) Filed under: Javascript

令人垢病的程式範例複製功能，終於改善了

過去不少網友反映過我網站上的程式碼複製不易。

其實，我自己也身受其害... 有時要從以前的文章抄範例來用，用Firefox複製得到的結果會買一送一，每列都加附一列空白；用IE則是程式碼斷行通通消失。我後來試出一種克難解法是先Copy到Word，再由Word Copy出來，就能萃取出原汁原味。

一個成天在搞網站開發的老傢伙，竟在自家網站留下如此敗筆，實在是人神共憤，天地不容吶~~~ 但一皮天下無難事，想偷懶總能找到一籮筐的理由，於是，就這麼一年撐過一年，網友礙於【黑暗】二字的淫威，敢怒不敢言，也只能隱忍在心，沒事再紮紮小草人渲洩一番。

今天大概是良心發現，想說自己老在鼔吹jQuery有多好用多好用，這不就是最好的驗證機會? 所以，我用jQuery寫了以下的Code，做出了上圖的效果: 每個程式碼區上方會多出兩個切換連結，點下"純文字"就會以Textarea方式顯示程式內容，大家就可以快快樂樂輕輕鬆鬆把程式帶回家囉!

有什麼使用上的問題，再反應給我吧!

$(function() {

    $("div.BlogCodeBlock").each(function() {

        $codeBlock = $(this).children("div:first");

        var code = []

        $codeBlock.children("pre").each(function() {

             code.push($(this).text());

        });

        var $ta = $("<textarea class='cCodeBlockTextarea'></textarea>");

        $ta.height($codeBlock.height()).width($codeBlock.width())

        .val(code.join("\n")).css("display", "none").insertAfter($codeBlock);

        $codeBlock.before(

        "<div class='cCBBar' style='background-color: #888888; padding: 3px'>" + 

        "<span class='cCBShowHL'>排版顯示</span>" +

        "<span class='cCBShowPT'>純文字</span></div>");

    });

    var cLEDColor = "yellow";

    $(".cCBShowHL,.cCBShowPT")

    .css({ 

        "text-decoration":"underline",

        "cursor":"pointer",

        "color":"black",

        "margin-left":"5px"

    }).click(function() {

        if ($(this).css("color") == cLEDColor)

            return;

        $(this)

        .css({ color:cLEDColor })

        .siblings()

        .css({ "color":"#444444" })

        .end().parent()

        .next().toggle().next().toggle();

    }).filter(".cCBShowHL").css("color", cLEDColor);

});

Posted 21 June 2009 04:08 AM 由 Jeffrey | 3 comment(s) Filed under: jQuery

搜尋