信息发布→ 登录 注册 退出

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

发布时间:2026-01-11

点击量:

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

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

效果图如下:

之前使用的是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>

标签:# 给他  # JavaScript 复制功能代码 兼容多浏览器  # 至2023年最好用的兼容多浏览器的原生js复制函数copyText  # 的是  # 其他的  # 上传  # 几个  # 这一  # 是在  # 剪切板  # 你可以  # 下载地址  # 兼容IE与Firefox的js 复制代码  # 就不  # 给大家  # 在那  # 火狐  # 所示  # 来做  # 才行  # 并不能  # 欢迎访问  # 大家分享  # js实现点击复制当前文本到剪贴板功能(兼容所有浏览器)  # JavaScript实现一键复制文本功能的示例代码  # Web js实现复制文本到粘贴板  # 使用js实现复制功能  # 使用 JS 复制页面内容的三种方案  # JavaScript实现一键复制内容剪贴板  # js复制文本到粘贴板(Clipboard.writeText())  # JS实现一键复制  # Vue中使用highlight.js实现代码高亮显示以及点击复制  # js实现复制粘贴的两种方法  # JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)  # JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)  # js复制内容到剪切板  # JavaScript 实现完美兼容多浏览器的复制功能代码  # 兼容主流浏览器的JS复制内容到剪贴板  # js实现的复制兼容chrome和IE  # 兼容所有浏览器的js复制插件Zero使用介绍  # 用js将内容复制到剪贴板兼容浏览器  # js复制网页内容并兼容各主流浏览器的代码  # JS复制内容到剪切板的实例代码(兼容IE与火狐)  # JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)  # 多浏览器兼容性比较好的复制到剪贴板的js代码  # GWT中复制到剪贴板 js+flash实现复制 兼容性比较好  
在线客服
服务热线

服务热线

4008888355

微信咨询
二维码
返回顶部
×二维码

截屏,微信识别二维码

打开微信

微信号已复制,请打开微信添加咨询详情!