简单实现兼容各大浏览器的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实现浮点数转十六进制字符
Oct 29 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
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实现的替换敏感字符串类实例
2014/09/22 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
WebPack基础知识详解
2017/01/16 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
列举Python中吸引人的一些特性
2015/04/09 Python
python 除法保留两位小数点的方法
2018/07/16 Python
python通过zabbix api获取主机
2018/09/17 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
python通过cython加密代码
2020/12/11 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
super关键字的用法
2012/04/10 面试题
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js