时间:2021-05-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和下面的一样即可。
对于事先准备的三个文件,请上传到代码中所示的路径中。这个据说是在服务器运行才行,我直接上传服务器测试的
这里已经是最简化的代码了。网上的那些乱七八糟的,实在不忍直视,所以,做出来就及时和大家分享一下。如果本文章有问题要问,可以在博客留言。
下面是实现的代码:
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
百度浏览器关闭系统剪切板插件教程。在百度浏览器上有个叫系统剪切板插件的功能,最近很多人都在问这个功能该如何关闭?今天小编就带来百度浏览器关闭系统剪切板插件教程。
以下共有4个函数分别是:1.从剪切板获得文字。2.将字符串复制到剪切板。3.从剪切板获得图片。4.复制图片到剪切板。/***从剪切板获得文字。*/publics
很多时候,我们使用IE浏览器或者闪游浏览器这种IE内核的浏览器时,经常会使用到一键复制到剪帖板(剪切板)的功能,例如IT之家、Win7之家、Win8之家这些网站
复制代码代码如下://复制到剪切板js代码functioncopyToClipBoard(s){//alert(s);if(window.clipboardDa
剪切板是Windows系统中自带一个非常好用的工具,通过这个小小的剪切板,我们可以进行复制、粘贴、剪切操作,轻松做到传递和共享信息。那么,Win10剪切板在哪?