简单实现兼容各大浏览器的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 = "\r\n本原创文章来源:C++技术网,阅读更多原创精品文章,欢迎访问C++技术网。\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("文章纯文本内容已经复制到剪切板!");
  });
});
</script>

  

时间: 2024-10-18 05:18:43

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

在多浏览器使用JS复制内容到剪切板,无需插件

最近在学习DHTMLX,下载了一些JS源码,使用谷歌浏览器,在学习dhtmlxGrid部分进行复制表格内容时,发现,在线版的可以复制成功,而本地的不可以复制,报类似访问剪切板错误,经查找原因,原来是谷歌处于安全考虑,不支持调用剪切板.我直接访问了在线的js,拷贝下来,和本地的对比了一下,代码不一样.简单研究了一下在线的js,发现,在线版的js里面有_clip_area,而调试中发现var c = this._clip_area = document.createElement("textarea

js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行粘贴. 案例2:在移动端(android 和 iOS端),用户获得邀请码之后,可以使用一键复制的功能,将邀请码复制到剪切板,然后在app中进行兑换. 使用jQuery中的方法监听用户的剪切.复制.粘贴的行为 $("#cut").on("cut",function(){ al

兼容安卓和ios实现一键复制内容到剪切板

实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <m

js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<body> <div id="cardList"> <div class="btn">点击我,复制我</div> </div> <script type="text/javascript">

浏览器点击复制粘贴到剪切板的解决

最近在做一个东西,需要的是复制文本里的内容 稍微研究了下关于H5的复制粘贴到剪切板的api,感觉兼容不尽人意 要么就是浏览器之间,要么就是方法需要支持https才可以,寻找了很久才找到一个符合我期许的一个插件clipboard.js 使用方法也是比较简单,直接引入js就可以使用,非常的方便快捷 1 <script type='text/javascript' src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.

复制内容到剪切板 兼容大部分手机浏览器

if (window.clipboardData) {  window.clipboardData.setData("Text", text); } else { unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); const clipboardHelper = Components.classes["@mozilla.org/widg

JQuery复制内容到剪切板-jquery.zclip.js的使用,在公司项目中

公司项目中有一个复制粘贴的内容,也试图找其他插件但都是浏览器兼容问题,在网上找这个插件挺不错的,FLASH,兼容各个浏览器,测试时要在服务器环境下,点击参考,参考这个网址,或者搜下标题这个插件,性能不错

Clipboard.js实现复制内容到剪切板

<script type="text/javascript"> var clipboard1 = new Clipboard('.bt01'); clipboard1.on('success', function (e) { alert("Copy Url Success!"); e.clearSelection(); }); </script> <div class="mt5"><img src=&qu

JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏览器的js复制内容到剪贴板的方案: 这个方案是一个最流行的方法: 著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁,复制内容到剪贴板. 原理是:创建一个隐藏的flash文件,同时给给flash的变量FlashVars 赋值“clipboard=..”,通过这个赋