JavaScript如何在各浏览器中实现复制功能代码详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript如何在各浏览器中实现复制功能代码详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2723字，纯文字阅读大概需要4分钟。

内容图文

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：复制成功事件
以上就是JavaScript如何在各浏览器中实现复制功能代码详解的详细内容，更多请关注Gxl网其它相关文章！


           
                
                                                

内容总结

以上是互联网集市为您收集整理的JavaScript如何在各浏览器中实现复制功能代码详解全部内容，希望文章能够帮你解决JavaScript如何在各浏览器中实现复制功能代码详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端