用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 相关文章推荐
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
p5.js实现动态图形临摹
Oct 23 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 Ajax乱码
2008/04/09 PHP
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
PHP实现验证码校验功能
2017/11/16 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
Python中的fileinput模块的简单实用示例
2015/07/09 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
Python3常见函数range()用法详解
2019/12/30 Python
python如何把字符串类型list转换成list
2020/02/18 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
python操作redis数据库的三种方法
2020/09/10 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
学生自我鉴定范文
2013/10/04 职场文书
军训自我鉴定
2014/01/22 职场文书
民族学专业求职信
2014/07/28 职场文书
捐款活动总结
2014/08/27 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
滴水洞导游词
2015/02/10 职场文书
爱护公物主题班会
2015/08/17 职场文书
python爬虫--selenium模块
2021/03/31 Python
MySQL创建索引需要了解的
2021/04/08 MySQL
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫