JavaScript实现复制功能各浏览器支持情况实测


Posted in Javascript onJuly 18, 2013

这两天在做Web前端时,遇到需求通过js实现文本复制的功能。
先不考虑浏览器的兼容性,看看各浏览器对复制功能的支持情况:

1、IE浏览器,解决方法有三种,代码如下:

function copy(txtid){ 
var txtObj = document.getElementById(txtid); 
if(window.clipboardData){ // 仅IE支持此对象,firefox、chrome不支持 
//1、通过clipboardData对象实现复制 
//window.clipboardData.clearData(); 
//window.clipboardData.setData("Text",txtObj.value); //2、通过document对象实现复制:先选择中文本,再执行复制命令 
//txtObj.select(); 
//document.execCommand("Copy"); // 仅IE支持,Firefox报语法错误,chrome执行结果返回false(不支持) 
//3、通过TextRange对象实现现复制:可以不用先选中内容 
txtObj.createTextRange().execCommand("Copy"); 
} 
}

2、Firefox,通过接口的方法实现,火狐是出于安全原因,在17之后版本关闭此接口,17及之前版本可用。代码如下:
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard);

3、Chrome出于安全,未向用户提供对剪贴板的操作。由此可见,各浏览器对复制功能的支持并不统一。
Zero Clipboard库
jhuckaby写的Zero Clipboard的js类库,利用Flash完成复制内容到剪贴板。只要浏览器装有Flash插件就可以复制内容,通过ActionScript屏蔽了JavaScript的不足,解决浏览器间复制兼容性问题。
Zero Clipboard的实现原理:Zero Clipboard首先生成Flash对象标签,让透明的Flash漂浮在复制按钮之上,其实点击的不是按钮而是Flash,这样将需要的内容传入Flash,再通过Flash的复制到系统剪贴板。
Zero Clipboard的使用方法
注意:由于是基于Flash实现,Flash出于安全,需要在Web容器(例如Apache、Tomcat)中才能运行,直接打开Flash将不会被加载,按钮类似假死现象,网上说右键Flash设置将ZeroClipboard.swf添加到受信任位置,感觉应该是行的,我试了,仍然不行,也可能是我本地浏览器的问题。
1>下载Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js和ZeroClipboard.swf放入到你的项目中;
2>引入Zero Clipboard.js文件,如下代码:<script type="text/javascript" src="ZeroClipboard.js"></script>;
注意:ZeroClipboard.js与ZeroClipboard.swf需要放在同一路径下,如果不在同一路径,可使用ZeroClipboard.setMoviePath()来设置。
3>简单复制代码如下:
var clip = new ZeroClipboard.Client(); // 新建一个clip对象 
clip.setHandCursor( true ); // 设置鼠标为手型 
clip.setText("hello,world"); // 设置要复制的文本,可以为文本框的值 
clip.glue("copy-botton"); // 为clip注册一个按钮,参数为按钮元素的id,点击按钮就可以实现复制

4>Zero Clipboard常用方法,建议直接查看源码:
reposition():防止当页面大小发生变化时,Flash按钮可能会错位问题
hide() :隐藏Flash按钮
show() :显示Flash按钮
setCSSEffects():解决Flash遮挡按钮样式失效问题(将:hover修改为.hover)。
5>Zero Clipboard 常用事件,事件处理函数为addEventListener():
load :Flash按钮加载完事件
mouseOver:鼠标移上事件
mouseOut: 鼠标移出事件
mouseDown:鼠标按下事件
mouseUp:鼠标松开事件
complete:复制成功事件

jquery.zclip库
由于ZeroClipboard是基于原生JavaScript实现,jquery.zclip使用jQuery对Zero Clipboard进行封装,如果项目中已经使用jQuery,建议使用它,jquery.zclip体积较小。
jquery.zclip下载地址:http://www.steamdev.com/zclip/
Zero Clipboard下载地址:https://github.com/zeroclipboard/ZeroClipboard/releases
示例下载:
为了方便测试,我将jquery.zclip和Zero Clipboard写好的例子上传到csdn,示例必须在web容器里运行。
demo下载地址

Javascript 相关文章推荐
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
Vue组件生命周期运行原理解析
Nov 25 Vue.js
jquery实现穿梭框功能
Jan 19 jQuery
JS相册图片抖动放大展示效果的示例代码
Jan 29 Javascript
原生JavaScript实现进度条
Feb 19 Javascript
GRID拖拽行的实例代码
Jul 18 #Javascript
去掉gridPanel表头全选框的小例子
Jul 18 #Javascript
gridpanel动态加载数据的实例代码
Jul 18 #Javascript
javaScript NameSpace 简单说明介绍
Jul 18 #Javascript
JS获取鼠标坐标的实例方法
Jul 18 #Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 #Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 #Javascript
You might like
封装一个PDO数据库操作类代码
2009/09/09 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python Matplotlib库入门指南
2015/05/18 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
总裁岗位职责
2013/12/04 职场文书
英语自荐信常用语句
2013/12/13 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
人民的好儿女观后感
2015/06/18 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers