用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中的一些注意事项 更新中
Dec 06 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
详谈javascript异步编程
Feb 21 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 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
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
Java基础面试题
2012/11/02 面试题
商业融资计划书
2014/04/29 职场文书
保护环境标语
2014/06/09 职场文书
上课不认真检讨书
2014/09/17 职场文书
个人德育工作总结
2015/03/05 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
python神经网络 使用Keras构建RNN训练
2022/05/04 Python