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 相关文章推荐
js借助ActiveXObject实现创建文件
Sep 29 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
使用vue制作滑动标签
Sep 21 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 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
php导出excel格式数据问题
2014/03/11 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
Python 深入理解yield
2008/09/06 Python
Python实现字典依据value排序
2016/02/24 Python
Python正则表达式经典入门教程
2017/05/22 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
Python 防止死锁的方法
2020/07/29 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
新闻学专业个人求职信写作
2014/02/04 职场文书
社会实践评语
2014/04/28 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
TypeScript 内置高级类型编程示例
2022/09/23 Javascript