快捷導(dǎo)航

簡(jiǎn)單實(shí)現(xiàn)兼容各大瀏覽器的js復(fù)制內(nèi)容到剪切板

更新時(shí)間：2015年09月09日 16:27:05 作者：codexia

相信這個(gè)功能大家平時(shí)上網(wǎng)經(jīng)常能碰到，去看了幾個(gè)常用的網(wǎng)站，都是用的透明flash遮擋“復(fù)制到剪貼板”按鈕，所以當(dāng)你點(diǎn)擊按鈕的時(shí)候，點(diǎn)擊的其實(shí)是flash，然后把你需要復(fù)制的內(nèi)容傳入到了flash，最后通過(guò)flash的復(fù)制功能把傳入的內(nèi)容復(fù)制到了剪貼板。

因?yàn)榫W(wǎng)站文章需要提供幾個(gè)按鈕，單擊后實(shí)現(xiàn)復(fù)制文章內(nèi)容到剪貼板。

在網(wǎng)上搜索了很多內(nèi)容，發(fā)現(xiàn)都比較亂這里自己整理下，分享給大家

效果圖如下：

之前使用的是window.clipboardData.setData，只能支持IE和火狐。360瀏覽器、搜狗等瀏覽器，都淚崩。所以，研究了ZeroClipboard，盡量使用js代碼寫(xiě)。

使用前先引用三個(gè)東西（沒(méi)有提供上傳附件，這里就不提供下載地址了，很常見(jiàn)，大家自己找度娘吧）：

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

下面是最簡(jiǎn)單的實(shí)現(xiàn)了，做一下解釋。

原理

把一個(gè)不可見(jiàn)的 Adobe Flash movie元素放到一個(gè)DOM元素上。用戶點(diǎn)擊那DOM元素時(shí)，其實(shí)點(diǎn)擊的是那不可見(jiàn)的Adobe Flash movie元素，F(xiàn)lash代碼來(lái)做將內(nèi)容復(fù)制到剪切板的操作。

注意：如果用js模擬一個(gè)在那flash上的點(diǎn)擊事件，并不能進(jìn)行復(fù)制內(nèi)容到剪貼板。原因是瀏覽器和flash的安全限制。

a標(biāo)簽就是一個(gè)按鈕，你可以替換成圖片等，但是id要和下面的clip.glue("copy_text");一致。

clip.setText(AddContent+ document.getElementById("id_div").innerText + AddContent);這一句的di_div就是要復(fù)制的Div的ID。這個(gè)ID可以是其他的標(biāo)簽的ID。想復(fù)制什么就寫(xiě)什么的ID。

其他的就原樣復(fù)制。你需要改的，就是最上面兩行，第一行就是需要復(fù)制的標(biāo)簽，一般你的網(wǎng)頁(yè)里已經(jīng)有了。只要給他設(shè)置個(gè)ID即可。那么第一行可以刪掉。第二行就可以自由發(fā)揮，反正用超鏈接也好，圖片也好，只要ID和下面的一樣即可。

對(duì)于事先準(zhǔn)備的三個(gè)文件，請(qǐng)上傳到代碼中所示的路徑中。這個(gè)據(jù)說(shuō)是在服務(wù)器運(yùn)行才行，我直接上傳服務(wù)器測(cè)試的

這里已經(jīng)是最簡(jiǎn)化的代碼了。網(wǎng)上的那些亂七八糟的，實(shí)在不忍直視，所以，做出來(lái)就及時(shí)和大家分享一下。如果本文章有問(wèn)題要問(wèn)，可以在博客留言。

下面是實(shí)現(xiàn)的代碼：

<div id="id_div">文本內(nèi)容</div><br><a href='#' id="copy_text" title="以純文本形式復(fù)制">復(fù)制文章純文本內(nèi)容</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本原創(chuàng)文章來(lái)源：C++技術(shù)網(wǎng)，閱讀更多原創(chuàng)精品文章，歡迎訪問(wèn)C++技術(shù)網(wǎng)。\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("文章純文本內(nèi)容已經(jīng)復(fù)制到剪切板！");
  });
});
</script>

您可能感興趣的文章: