宝哥软件园

简单的js实现将兼容主要浏览器的内容复制到剪贴板

编辑:宝哥软件园 来源:互联网 时间:2021-09-08

因为网站文章需要提供几个按钮,点击即可将文章内容复制到剪贴板。

我在网上搜索了很多内容,发现很乱。我会整理出来和你分享

效果图如下:

之前用的是Window.clipboardData.setData,只能支持IE和火狐。360浏览器、搜狗等浏览器,都放声大哭。因此,我们研究了zero剪贴板,并尝试使用js代码来编写它。

使用前引用三件事(没有提供上传附件,所以这里不提供下载地址,很常见。请你自己找杜娘):

jquery-1 . 4 . 1 . min . js zero clipboard . js zero clipboard . swf

下面是最简单的实现,解释一下。

原则

在DOM元素上放置一个不可见的Adobe Flash电影元素。当用户点击DOM元素时,他实际上点击了不可见的Adobe Flash电影元素,Flash代码将内容复制到剪贴板。

注意:如果使用js来模拟闪存上的点击事件,则不能将内容复制到剪贴板。原因是浏览器和flash的安全限制。

标签是一个按钮,你可以用图片代替,等等。但id应该与下面的clip.glue('copy_text ')相同;一致。

clip . settext(AddContent document . getelementbyid(' id _ div ')。innerText AddContent);在这个句子中,di_Div是要复制的Div的ID。这个标识可以是其他标签的标识。写下你想复制的任何东西的ID。

其他的照原样复制。你需要改变的是前两行。第一行是需要复制的标签。一般来说,你的网页上已经有了。给他一个身份证就行了。那么第一行可以删除。第二行免费玩,可以是超链接,也可以是图片,只要ID和下面一样就可以了。

对于提前准备好的三个文件,请上传到代码所示的路径。据说这是在服务器上运行的,所以我直接上传到服务器上测试

这是最简单的代码。直接看网上乱七八糟的东西我实在受不了,一做好就和大家分享。如果你对这篇文章有任何疑问,可以在你的博客上留言。

下面是实现代码:

Div id='id_div '文本内容/div bra href=' # ' id=' copy _ text ' title='以纯文本形式复制'复制文章的纯文本内容/ABR脚本类型=' text/JavaScript ' src=' http 3360/js/global/jquery-1 . 4 . 1 . min . js '/script脚本类型=' text/JavaScript ' src=' http 3360/js/global/zero clipboard . js '/script脚本类型=' text/zero clipboard . setmoviepath('/js/global/zero clipboard . swf ');$(文档)。ready(function(){ var add content=' r n本文来源:C技术网。阅读更多原创优秀文章。欢迎来到C科技网。 r n ';clip=新的零剪贴板。client();clip . sethandarsor(true);clip . settext(AddContent document . getelementbyid(' id _ div ')。innerText AddContent);clip . glue(' copy _ text ');clip . addevent listener(' complete ',function () {alert('文章的纯文本内容已复制到剪贴板!' );});});/script

更多资讯
游戏推荐
更多+