简单实现兼容各大浏览器的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 相关文章推荐
循环 vs 递归浅谈
Feb 28 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 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多图上传小程序代码
2011/07/17 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
Python生成密码库功能示例
2017/05/23 Python
python使用turtle库绘制时钟
2020/03/25 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
python speech模块的使用方法
2020/09/09 Python
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
环境工程专业自荐信
2014/03/03 职场文书
艾滋病宣传标语
2014/06/25 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2015年元旦标语大全
2014/12/09 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
企业党建工作总结2015
2015/05/26 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
Python类方法总结讲解
2021/07/26 Python
Python 图片添加美颜效果
2022/04/28 Python