用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 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
JQUERY获取form表单值的代码
Jul 17 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
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
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
python 字符串split的用法分享
2013/03/23 Python
python 多进程队列数据处理详解
2019/12/23 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
咨询公司各岗位职责
2013/12/02 职场文书
如何写股份合作协议书
2014/09/11 职场文书
关于学习的决心书
2015/02/05 职场文书
期末个人总结范文
2015/02/13 职场文书
困难补助申请报告
2015/05/19 职场文书
预备党员介绍人意见
2015/06/01 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
Python中for后接else的语法使用
2021/05/18 Python
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js