用js将内容复制到剪贴板兼容浏览器


Posted in Javascript onMarch 18, 2014

若想通过js将内容复制到剪贴板,本来不难,可是若考虑到浏览器的兼容性问题,就变的有点麻烦,使用jquery-zclip复制是一个不错的选择,借助flash实现浏览器的兼容。原理就不细讲了,下面说下如何实现。

比如我的html代码如下:

<div class="buttonBox"> 
<code rel="1"><span id="id_1">要复制的内容1</span></code> 
<code rel="2"><span id="id_2">要复制的内容2</span></code> 
<code rel="3"><span id="id_3">要复制的内容3</span></code> 
</div>

js文件总共需要两个,jquery就不用说了,再就是jquery-zclip.js和ZeroClipboard.swf,这两个文件可以在官方网站上下载,地址如下:http://www.steamdev.com/zclip/

生成复制按钮的js如下

<script type="text/javascript"> 
$(function(){ 
$('code').each(function(){ 
var self = $(this); 
var id = self.attr('rel'); 
var copy = $('<span>复制</span>').appendTo(self).zclip({ 
'path':'/static/admin/js/ZeroClipboard.swf',//这里写自己存在的地址 
'afterCopy':function(){ 
alert('获取对应代码的地址已经复制到剪切板,可以使用ctrl+v粘贴'); 
}, 
'copy':function(){ 
return $('#id_'+id).text();//注意这里,若是div span等使用text(),若是input等,使用val(),这个支持的不是很好 
} 
}); 
}); 
}); </script>

这样就能时间跨浏览器的复制了,本来不是很难的事情,我做测试的时候也挺顺利的,可以当我把他放到项目中就出问题了,复制按钮产生位置没有flash,只有文字,后来发现,其实flash生成了,但是没有在文字所在的位置,估计和我项目后台使用的是iframe结构有关系,估计这是这个插件的一个bug吧,后来查了很多资料,有的人说,需要改下代码就可以了,后来我改了,下,果然就可以了

需要修改的代码如下

getDOMObjectPosition: function (obj, stopObj) { 
// get absolute coordinates for dom element 
var info = { 
left: 0, 
top: 0, 
width: obj.width ? obj.width : obj.offsetWidth, 
height: obj.height ? obj.height : obj.offsetHeight 
}; if (obj && (obj != stopObj)) { 
//info.left += obj.offsetLeft; //修改前 
//info.top += obj.offsetTop; //修改前 
jpos = $(obj).position(); //修改后 
info.left += jpos.left; //修改后 
info.top += jpos.top; //修改后 
} 
return info; 
}

其实这和这个插件的原理有关系,他就将一个透明的flash覆盖到按钮的上面,若他们两个不重合,就出现了上面的问题。
Javascript 相关文章推荐
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
javascript页面上使用动态时间具体实现
Mar 18 #Javascript
JS调用页面表格导出excel示例代码
Mar 18 #Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 #Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 #Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 #Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 #Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 #Javascript
You might like
PHP开发文件系统实例讲解
2006/10/09 PHP
php mssql 数据库分页SQL语句
2008/12/16 PHP
php正则表达式(regar expression)
2011/09/10 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
jquery 常用操作方法
2010/01/28 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
JavaScript判断浏览器及其版本信息
2017/01/20 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Python字典遍历操作实例小结
2019/03/05 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
python openpyxl模块的使用详解
2021/02/25 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
七一表彰活动方案
2014/01/18 职场文书
计生工作先进事迹
2014/08/15 职场文书
违章停车检讨书
2014/10/21 职场文书
迟到检讨书范文
2015/01/27 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
Java存储没有重复元素的数组
2022/04/29 Java/Android
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers