用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 相关文章推荐
jquery一句话全选/取消全选
Mar 01 Javascript
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 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 采集程序中常用的函数
2009/12/09 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
python批量修改文件名的实现代码
2014/09/01 Python
深入理解Python 代码优化详解
2014/10/27 Python
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python中使用PDB库调试程序
2015/04/05 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
python 默认参数问题的陷阱
2016/02/29 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
Python selenium 三种等待方式解读
2016/09/15 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
金讯Java笔试题目
2013/06/18 面试题
餐饮周年庆活动方案
2014/08/14 职场文书
电影地道战观后感
2015/06/04 职场文书
财务年终工作总结大全
2019/06/20 职场文书
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS