1. 程式人生 > >js實現將要複製的內容放到剪貼簿裡面

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