用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更改class和id的方法
Oct 10 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
JavaScript中的各种宽高属性的实现
May 08 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
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
js格式化时间的方法
2015/12/18 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
对numpy.append()里的axis的用法详解
2018/06/28 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
django使用xadmin的全局配置详解
2019/11/15 Python
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
初二政治教学反思
2014/01/12 职场文书
驾驶员岗位职责
2014/01/29 职场文书
自我评价的范文
2014/02/02 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
个人工作表现评价材料
2014/09/21 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
公司离职证明范本
2014/10/17 职场文书
师德师风学习材料
2014/12/19 职场文书
安全教育第一课观后感
2015/06/17 职场文书
三八节活动简报
2015/07/20 职场文书
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA