简单实现兼容各大浏览器的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 相关文章推荐
javascript,jquery闭包概念分析
Jun 19 Javascript
jquery.validate使用攻略 第三部
Jul 01 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
js+html实现点名系统功能
Nov 05 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数据缓存技术
2007/02/14 PHP
PHP学习资料汇总与网址
2007/03/16 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
PHP错误机制知识汇总
2016/03/24 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
python实现代理服务功能实例
2013/11/15 Python
python实现textrank关键词提取
2018/06/22 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
Python reversed函数及使用方法解析
2020/03/17 Python
Python @property及getter setter原理详解
2020/03/31 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
园林施工员岗位职责
2013/12/11 职场文书
如何写好升职自荐信
2014/01/06 职场文书
自主招生自荐信指南
2014/02/04 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
MySQL视图概念以及相关应用
2022/04/19 MySQL