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>

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

秒客网

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

相关文章