用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 EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
cookie的secure属性详解
Apr 08 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
JS setTimeout与setInterval的区别
Apr 20 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中trim()函数简单使用指南
2015/04/16 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
php计算年龄精准到年月日
2015/11/17 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
简单实现python爬虫功能
2015/12/31 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
自荐书范文
2013/12/08 职场文书
超市促销活动方案
2014/03/05 职场文书
员工工作自我评价
2014/09/26 职场文书
护士个人年度总结范文
2015/02/13 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python