Detailed explanation of how JavaScript implements copy function code in various browsers

Look at the support of each browser for the copy function:

1. IE browser, there are three solutions, the code is as follows:

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 is implemented through the interface method. For security reasons, Firefox closes this interface in versions after 17. It is available in versions 17 and earlier. The code is as follows:

var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard);

3. Chrome does not provide users with clipboard operations for security reasons. It can be seen that the support for the copy function is not uniform across browsers.
Zero Clipboard Library
Zero Clipboard js library written by jhuckaby uses Flash to copy content to the clipboard. As long as the browser is equipped with the Flash plug-in, the content can be copied. ActionScript is used to shield the shortcomings of JavaScript and solve the problem of copy compatibility between browsers.
The implementation principle of Zero Clipboard: Zero Clipboard first generates Flash object tags, allowing transparent Flash to float on the copy button. In fact, what is clicked is not the button but Flash. In this way, the required content is transferred to Flash, and then passed through Flash. Copy to system clipboard.
How to use Zero Clipboard
Note: Since it is based on Flash implementation, Flash needs to be run in a Web container (such as Apache, Tomcat) for security reasons. Opening Flash directly will not be loaded, and the button will resemble suspended animation. Phenomenon, the Internet said that right-clicking Flash settings and adding ZeroClipboard.swf to a trusted location seems to work. I tried it, but it still doesn't work. It may also be a problem with my local browser.
1>Download the compressed package of Zero Clipboard, unzip it and put the two files in the folder: ZeroClipboard.js and ZeroClipboard.swf into your project;
2>Introduce the Zero Clipboard.js file, as follows Code: 2019610e86e7c18efdfbe3904aed8b482cacc6d41bbb37262a98f745aa00fbf0;
Note: ZeroClipboard.js and ZeroClipboard.swf need to be placed in the same path, if they are not in the same path , can be set using ZeroClipboard.setMoviePath().
3>Simple copy the code as follows:

var clip = new ZeroClipboard.Client(); // 新建一个clip对象 
clip.setHandCursor( true ); // 设置鼠标为手型 
clip.setText("hello,world"); // 设置要复制的文本，可以为文本框的值 
clip.glue("copy-botton"); // 为clip注册一个按钮，参数为按钮元素的id，点击按钮就可以实现复制

4>Zero Clipboard common method, it is recommended to view the source code directly:
reposition(): To prevent the Flash button from being misaligned when the page size changes
hide(): Hide the Flash button
show(): Show the Flash button
setCSSEffects(): Solve the problem of invalid Flash shield button style (change :hover to .hover).
5>Zero Clipboard common events, the event processing function is addEventListener():
load: Flash button loading event
mouseOver: mouse move up event
mouseOut: mouse move out event
mouseDown: Mouse press event
mouseUp: mouse release event
complete: copy success event

The above is the detailed content of Detailed explanation of how JavaScript implements copy function code in various browsers. For more information, please follow other related articles on the PHP Chinese website!