用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 相关文章推荐
js过滤数组重复元素的方法
Sep 05 Javascript
移动节点的jquery代码
Jan 13 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
15个小时----从修改程序到自己些程序
2006/10/09 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
浅析PHP文件下载原理
2014/12/25 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
js 省地市级联选择
2010/02/07 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
JS二分查找算法详解
2017/11/01 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
javascript使用链接跨域下载图片
2019/11/01 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
在Django同1个页面中的多表单处理详解
2017/01/25 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
代码详解django中数据库设置
2019/01/28 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
python3访问字典里的值实例方法
2020/11/18 Python
Python实现微信表情包炸群功能
2021/01/28 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
体育教师工作总结的自我评价
2013/10/10 职场文书
如何掌握自荐信格式呢
2013/11/19 职场文书
50岁生日感言
2014/01/23 职场文书
网络程序员自荐信
2014/01/25 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
解除施工合同协议书
2014/10/17 职场文书
2014年创卫工作总结
2014/11/24 职场文书
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript