简单实现兼容各大浏览器的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 数据缓存data(name, value)详解及实现
Jan 04 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
Aug 01 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
JavaScript ES 模块的使用
Nov 12 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伪造referer实例代码
2008/09/20 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
PHP查询分页的实现代码
2017/06/09 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
js电话号码验证方法
2015/09/28 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
在centos7中分布式部署pyspider
2017/05/03 Python
Python3 replace()函数使用方法
2018/03/19 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
python检测服务器端口代码实例
2019/08/31 Python
Python作用域与名字空间原理详解
2020/03/21 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
会计助理的岗位职责
2013/11/29 职场文书
物流专业大学的自我评价
2014/01/11 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
学校十一活动方案
2014/02/01 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
处理canvas绘制图片模糊问题
2022/05/11 Javascript