用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 短路法代码精简
Aug 20 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
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 不错的学习资料
2009/02/06 PHP
php学习之运算符相关概念
2011/06/09 PHP
php模块memcache和memcached区别分析
2011/06/14 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
Python datetime时间格式化去掉前导0
2014/07/31 Python
python使用RNN实现文本分类
2018/05/24 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
python生成器用法实例详解
2019/11/22 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
Python气泡提示与标签的实现
2020/04/01 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
英国最大的海报商店:GB Posters
2018/03/20 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
师范毕业生自荐信
2013/10/17 职场文书
物业管理员岗位职责范文
2013/11/25 职场文书
销售会计岗位职责
2014/03/15 职场文书
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL