用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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 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 注释规范
2012/03/29 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
移动端js图片查看器
2016/11/17 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python自动生产表情包
2017/03/17 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
美国宠物商店:Wag.com
2016/10/25 全球购物
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
仓库理货员岗位职责
2013/12/18 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
干部对照检查材料范文
2014/08/26 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
大学生党员自我评价
2015/03/04 职场文书
教师党员个人自我评价
2015/03/04 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
入党申请书怎么写?
2019/06/11 职场文书