js插件實現點擊複製內容到粘貼板，兼容IE8

時間 2019-11-10

原文原文鏈接

先來看下本次須要導入的文件：html

第一個是jquery.js，這個很少說；jquery

第二個是jquery.zclip.js，第三個是zeroClipboard.swf ，這兩個文件的下載連接：http://www.bootcdn.cn/zclip/瀏覽器

那麼如何使用上面連接呢？測試

1. 複製上面連接在瀏覽器打開，其中zeroClipboard.swf打開會直接下載，若是你的瀏覽器不會直接下載，能夠ctrl+s保存到本地，下載成功後會提示下面的信息，點擊「保留」便可，而後複製到項目制定目錄下（path配置項的路徑但是該目錄的絕對路徑，也能夠是相對路徑，我在調試的時候發現，直接複製上面連接放在path裏面會報錯的。）url

2.插件的話，根據須要下載源文件仍是壓縮文件，這裏下載的是 jquery.zclip.js，下載方法同上（複製連接打開，ctrl+s保存在本地，能夠直接使用該連接）。spa

先看第一個效果圖：插件

點擊複製連接，複製輸入框的內容到粘貼板上。下面是html代碼，比較粗糙。調試

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="text" value="www.baidu.com" id="link"> 
        <span id="copyBtn">複製連接</span> 
        <script src="jquery.min.js"></script>
        <script src="jquery.zclip.js"></script>
        <script>
        
            $('#copyBtn').zclip({ 
                path: "zeroClipboard.swf", 
                copy: function(){ 
                    return $('#link').val(); 
      　　　 　　    },
                afterCopy:function(){/* 複製成功後的操做 */
                    alert("複製成功！");
                }
            }); 
        </script>
    </body>
</html>

以上代碼經測試，在IE8下點擊是沒有效果的。由於不知道如何使這個插件兼容IE8，因此下面換一種方式來兼容IE8：code

點擊按鈕後的彈框效果圖：cdn

實現代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="sharebtn">複製</div>
        
        <!--IE8下顯示的複製分享連接彈框-->
        <div id="copyLayer" style="display: none;padding: 3%;">
            <p>方法一： 快捷鍵Ctrl+c 複製</p>
            <p>方法二： 鼠標右鍵選擇複製</p>    
            <textarea id="copyContent" name="" rows="6" style="width: 98%;"></textarea>
        </div>
        
        
        <script src="jquery.min.js"></script>
        <script src="jquery.zclip.js"></script>
        <script src="layer/layer.js"></script>
        <script>
            var urlPath = window.location.href;
            $('.sharebtn').click(function(){
                //若是$.support.leadingWhitespace爲false，則是IE8及如下瀏覽器
                if(!$.support.leadingWhitespace){
                    layer.open({
                        type: 1,  //html內容顯示模式
                        title:  ['複製連接分享', 'font-size:16px;'],
                        area: ['500px', '300px'], //寬高
                        content: $("#copyLayer"),
                        btn: '肯定',
                        offset: '30%',
                        shade: 'background-color: rgba(0,0,0,.5)',
                        success: function(){
                            $("#copyContent").val(urlPath);  //顯示連接內容
                            $("#copyContent").select();  //選中連接內容
                        }
                    });
                }
            })
            //IE9+及主流瀏覽器 
            if($.support.leadingWhitespace){
                //連接複製分享 - 點擊複製
                $('.sharebtn').zclip({ 
                    path: "zeroClipboard.swf", 
                    copy: function(){ 
                        return urlPath; 
              　　　 　 },
                    afterCopy:function(){
                        layer.open({
                            content: '複製成功!',
                            btn: '肯定',
                            time: 3000,
                            offset: '30%',
                            shade: 'background-color: rgba(0,0,0,.5)',
                            shadeClose: true
                        });
                    }
                }); 
            }
        </script>
    </body>
</html>