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


Posted in Javascript onSeptember 09, 2015

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

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

效果图如下:

简单实现兼容各大浏览器的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>
Javascript 相关文章推荐
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
vue-test-utils初使用详解
May 23 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 #Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 #Javascript
JS实现自动变换的菜单效果代码
Sep 09 #Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 #Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 #Javascript
使用impress.js制作幻灯片
Sep 09 #Javascript
谈谈impress.js初步理解
Sep 09 #Javascript
You might like
PHP开启opcache提升代码性能
2015/04/26 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
Python线程的两种编程方式
2015/04/14 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
python scatter函数用法实例详解
2020/02/11 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
某公司面试题
2012/03/05 面试题
高中毕业自我鉴定
2013/12/19 职场文书
客户表扬信范文
2014/01/10 职场文书
校本教研工作方案
2014/01/14 职场文书
新闻学专业求职信
2014/07/28 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
中标通知书范本
2015/04/17 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python
Mysql中mvcc各场景理解应用
2022/08/05 MySQL