您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

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

2024/4/11 18:06:29发布18次查看
因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板。
在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家
效果图如下:
之前使用的是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和下面的一样即可。
对于事先准备的三个文件,请上传到代码中所示的路径中。这个据说是在服务器运行才行,我直接上传服务器测试的
这里已经是最简化的代码了。网上的那些乱七八糟的,实在不忍直视,所以,做出来就及时和大家分享一下。如果本文章有问题要问,可以在博客留言。
 下面是实现的代码:
文本内容
复制文章纯文本内容

该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product