当前位置：Gxlcms > JavaScript > JavaScript实现复制功能各浏览器支持情况实测_javascript技巧

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

时间：2021-07-01 10:21:17 帮助过：27人阅读

这两天在做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文件，如下代码：