简单实现兼容各大浏览器的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 相关文章推荐
过虑特殊字符输入的js代码
Aug 05 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 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
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
Python中处理unchecked未捕获异常实例
2015/01/17 Python
python查询sqlite数据表的方法
2015/05/08 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
python 产生token及token验证的方法
2018/12/26 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
Python try except finally资源回收的实现
2021/01/25 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
速比涛英国官网:Speedo英国
2019/07/15 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
五年级音乐教学反思
2014/02/06 职场文书
买房委托公证书
2014/04/08 职场文书
网络优化专员求职信
2014/05/04 职场文书
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python