简单实现兼容各大浏览器的js复制内容到剪切板 - CSDN文库

525 浏览量更新于2023-05-27 评论收藏 62KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

简单实现兼容各大浏览器的简单实现兼容各大浏览器的js复制内容到剪切板复制内容到剪切板

因为网站文章需要提供几个按钮，单击后实现复制文章内容到剪贴板。

在网上搜索了很多内容，发现都比较乱这里自己整理下，分享给大家

效果图如下：

之前使用的是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 = "本原创文章来源：C++技术网，阅读更多原创精品文章，欢迎访问C++技术网。";

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>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

weixin_38610870

粉丝: 1
资源: 914

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈