用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 继承详解(三)
Jul 13 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 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
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
Python机器学习之SVM支持向量机
2017/12/27 Python
Python遍历pandas数据方法总结
2018/02/09 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
Python中断多重循环的思路总结
2019/10/04 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
高一政治教学反思
2014/01/28 职场文书
网管求职信
2014/03/03 职场文书
法律六进活动方案
2014/03/13 职场文书
施工员岗位职责
2014/03/16 职场文书
项目采购员岗位职责
2014/04/15 职场文书
Python使用MapReduce进行简单的销售统计
2022/04/22 Python