因為網站文章需要提供幾個按鈕,單擊后實現復制文章內容到剪貼板。
在網上搜索了很多內容,發現都比較亂這里自己整理下,分享給大家
效果圖如下:
之前使用的是window.clipboardData.setData,只能支持IE和火狐。360瀏覽器、搜狗等瀏覽器,都淚崩。所以,研究了ZeroClipboard,盡量使用js代碼寫。
使用前先引用三個東西(沒有提供上傳附件,這里就不提供下載地址了,很常見,大家自己找度娘吧):
jquery-1.4.1.min.js
ZeroClipboard.js
ZeroClipboard.swf
下面是最簡單的實現了,做一下解釋。
原理
把一個不可見的 Adobe 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++技術網。/r/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>
新聞熱點
疑難解答