js实现将要复制的内容放到剪贴板里面

功能：点击按钮，将当前页面的url放到剪贴板里面

1、对于IE有一个专门的接口来设置要复制的内容：window.clipboardData

      复制当前页面的url

             html如下：               

           <button onClick = 'copyURL();'>复制url地址</button>

             js如下：        

       function copyURL(){
             var url = location.href;
             window.clipboardData.setData('Text',url);
             console.log('success');
       }

注意window.clipboardData只是对IE有效，对其他浏览器都不兼容

2、利用js插件ZeroClipboard实现跨浏览器复制功能

      A、在HTML中引入该插件       

       <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js" ></script>

             <!--部分HTML代码-->    

       <textarea id="content" rows="10" cols="60">这里是需要复制的内容</textarea>
       <input id="copy" type="button" data-clipboard-target="content" value="复制">

      B、部分js代码

       var clip = new ZeroClipboard( document.getElementById("copy") );

           

解析：在textarea里面设置id = 'content'，在要触发复制事件的对象input里面设置属性data-clipboard-target的值为要复制的对象的id，               即content。

           js中直接生成对象ZeroClipboard，如ZeroClipboard(document.getElementById('copy'));  //点击'copy'按钮，就可以将textarea

           中的内容复制到剪贴板里面

另外一个例子：利用ZeroClipboard插件实现将当前页面的URL复制到剪贴板里面

       首先、在HTML中引入插件ZeroClipboard       

         <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js" ></script>

         <script src="http://i.gtimg.cn/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=31536000"></script>

       其次、在html中定义触发复制事件的对象               

         <p id="clipBoardTxt">复制链接</p>

       

       然后、在js文件中调用ZeroClipboard，js部分代码如下（这里用的是jquery语法，所以在html中先引入jquery）

    // 点击按钮，实现将当前页url放到剪贴板上，并关闭当前页
    $('#clipBoardTxt').click(function(){
        var clipBoardCont = location.href;                 // 要复制的url

        var clip = new ZeroClipboard($('#clipBoardTxt')); // 定义触发复制的对象
       

        clip.setText(clipBoardCont);                       // 设置剪贴板的内容 ,至此已经将剪贴板的内容设置为当前页的url了
       
        success_prompt_alert('复制成功');                 // 自定义提示的函数
        

        setTimeout(function(){
            // 关闭当前浏览器页面
            WeixinJSBridge.invoke('closeWindow',{});      //设置2s之后，调用微信浏览器的接口WeixinJSBridge，关闭当前页
        },2000);
        
    });