ZeroClipboard，竟然無法在Google Chrome浏覽器中使用

事情是非常讓人不爽的，本來看起來挺簡單的ZeroClipboard，我怎麼就是搞不定。折騰了将近一下午的時間，發現同樣的代碼在Firefox浏覽器上運作ZeroClipboard就是正常的，而Google Chrome浏覽器卻無法實作copy的功能！

讓我先抱怨兩句吧，在GitHub上找了各種版本的ZeroClipboard，也在百度上搜了各種解決辦法，發現人家的例子都在Firefox浏覽器上運作正常，而我的程式在Google Chrome浏覽器上怎麼都沒有複制粘貼的效果。人都要氣炸了，最後才後知後覺的發現是浏覽器相容的問題——那既然事實這樣的凄慘，為什麼網絡上其他的資源都說ZeroClipboard是跨浏覽器的，它解決了複制粘貼在浏覽器各種版本不相容的問題？

當然了，既然能在Firefox浏覽器上實作複制粘貼，還是需要把這個方案介紹給需要的方案，接下來就是如何在Google Chrome浏覽器上安裝Adobe flash的插件。

一、Firefox上的實作效果

二、實作方式

在GitHub上下載下傳 ZeroClipboard

https://github.com/zeroclipboard/zeroclipboard. 放在工作目錄中如下圖：

注意：ZeroClipboard.swf和ZeroClipboard.js在一個路徑下。

在頁面中引入ZeroClipboard.js。

<script type="text/javascript" src="${ctx}/components/zeroclipboard/ZeroClipboard.js"></script>

同時放上一個按鈕。

<button class="btn btn-block btn-primary btn-flat clipboard" data-clipboard-text="${encode_shareUrl}">點選複制二維碼位址</button>

注意：data-clipboard-text屬性指派後，ZeroClipboard在複制的時候會選擇該值放在粘貼闆中。

頁面加載完畢時初始化複制的按鈕。

<script type="text/javascript">
<!--
    $(function() {
        $("button.clipboard", $p).each(function() {
        var $this = $(this);
        var clip = new ZeroClipboard($this);
        clip.on('error', function(event) {
            $this.hide().before(event.message);
            ZeroClipboard.destroy();
        });
    });
    });
//-->
</script>      

最好，加上判斷error的監聽，這樣防止浏覽器不支援的時候沒有提示。