用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学习笔记2 函数
Jan 11 Javascript
jQuery 选择器、DOM操作、事件、动画
Nov 25 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
JS script脚本中async和defer区别详解
Jun 24 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非常实用的功能
2015/09/29 PHP
laravel自定义分页效果
2017/07/23 PHP
JS backgroundImage控制
2009/05/19 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
node.js获取参数的常用方法(总结)
2017/05/29 Python
分析Python中解析构建数据知识
2018/01/20 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
python实发邮件实例详解
2019/11/11 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
喜之郎果冻广告词
2014/03/20 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
雷锋电影观后感
2015/06/10 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏