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>

这里是经过判断是不是IE8浏览器，自动选中分享连接，可是须要经过手动复制，最终实现分享功能。