首頁 > web前端 > js教程 > 簡單實作相容各大瀏覽器的js複製內容到剪切板_jquery

簡單實作相容各大瀏覽器的js複製內容到剪切板_jquery

WBOY
發布: 2016-05-16 15:39:56
原創
1400 人瀏覽過

因為網站文章需要提供幾個按鈕,點擊後實作複製文章內容到剪貼簿。

網路上搜尋了許多內容,發現都比較亂這裡自己整理下,分享給大家

效果圖如下:

之前使用的是window.clipboardData.setData,只能支援IE和火狐。 360瀏覽器、搜狗等瀏覽器,都淚崩。所以,研究了ZeroClipboard,盡量用js程式寫。

使用前先引用三個東西(沒有提供上傳附件,這裡就不提供下載地址了,很常見,大家自己找度娘吧):

jquery-1.4.1.min.js   
ZeroClipboard.js  
ZeroClipboard.swf 

下面是最簡單的實作了,做一下解釋。

原理

把一個不可見的 Adob​​​​e Flash movie元素放到一個DOM元素上。當使用者點擊那DOM元素時,其實點擊的是那不可見的Adobe Flash movie元素,Flash程式碼來做將內容複製到剪切板的操作。

注意:如果用js模擬一個在那flash上​​的點擊事件,並不能進行複製內容到剪貼簿。原因是瀏覽器和flash的安全限制。

a標籤就是一個按鈕,你可以替換成圖片等,但是id要跟下面的clip.glue("copy_text");一致。

clip.setText(AddContent document.getElementById("id_div").innerText AddContent);這句話的di_div就是要複製的Div的ID。這個ID可以是其他的標籤的ID。想複製什麼就寫什麼的ID。

其他的就原樣複製。你需要改的,就是最上面兩行,第一行就是需要複製的標籤,一般你的網頁裡已經有了。只要給他設定個ID即可。那麼第一行可以刪掉。第二行就可以自由發揮,反正用超連結也好,圖片也好,只要ID跟下面的一樣即可。

對於事先準備的三個文件,請上傳到程式碼中所示的路徑中。這個據說是在伺服器運行才行,我直接上傳伺服器測試的

這裡已經是最簡化的程式碼了。網路上的那些亂七八糟的,實在不忍直視,所以,做出來就及時和大家分享一下。如果本文章有問題要問,可以在部落格留言。

 下面是實現的程式碼:

<div id="id_div">文本内容</div><br><a href='#' id="copy_text" title="以纯文本形式复制">复制文章纯文本内容</a><br>
<script type="text/javascript" src="/js/global/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/js/global/ZeroClipboard.js"></script>
<script type="text/javascript">
var clip = null;
ZeroClipboard.setMoviePath("/js/global/ZeroClipboard.swf");
$(document).ready(function(){
    var AddContent = "\r\n本原创文章来源:C++技术网,阅读更多原创精品文章,欢迎访问C++技术网。
\n";
  clip = new ZeroClipboard.Client();
  clip.setHandCursor(true);
  clip.setText(AddContent+ document.getElementById("id_div").innerText + AddContent);
  clip.glue("copy_text");
  clip.addEventListener("complete", function(){
    alert("文章纯文本内容已经复制到剪切板!");
  });
});
</script>
登入後複製

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板