Nowadays, there are more and more browser types, such as IE, Firefox, Chrome, Safari, etc., so it is not that easy to implement a small function of copying content to the clipboard with a js.
In the FLASH 9 era, there was a solution to kill all browsers' js copy content to the clipboard :
This solution is one of the most popular methods: the famous Clipboard Copy solution utilizes a clipboard.swf as a bridge to copy content to the clipboard.
The principle is: create a hidden flash file, and at the same time assign the value "clipboard=.." to the flash variable Flash. Through this assignment, the copied content will be placed on the clipboard. This method is compatible with IE, Firefox, Opera, Chrome, and Safari, and is truly a "universal" solution. The installation rate of browser Flash is very high, which is almost a perfect solution.
The code copy is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Developer- www.Admin10000.com </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var clipboardswfdata;
var setcopy_gettext = function(){
clipboardswfdata = document.getElementById('test_text').value;
//alert(clipboardswfdata);
window.document.clipboardswf.SetVariable('str', clipboardswfdata);
}
var floatwin = function(){
alert('Copy successfully!');
//document.getElementById('clipinner').style.display = 'none';
}
</script>
</head>
<body>
<textarea id="test_text" rows="15" cols="100">Text content.....</textarea>
<div id="clipboard_content">
<div><span id="clipinner">Copy the code to the clipboard
<embed name="clipboardswf" id="clipboardswf" onmouseover="setcopy_gettext()" devicefont="false" src="./_clipboard.swf" menu="false" allowscriptaccess="sameDomain" swliveconnect="true" wmode="transparent" type="application/x-shockwave-flash">
</span>
</div>
</div>
</body>
</html>
The download address of clipboard.swf: http://www.jeffothy.com/weblog/uploads/clipboard.php
But in the Flash 10 era, the above method is no longer possible.
Because flash10 stipulates that only real operations on swf (such as mouse click) can access the clipboard, while the above method only uses a hidden swf file and operates the flash clipboard through JavaScript. The user does not perform real operations on the swf file, so this method is invalid.
So how to solve this "real operation" problem? You can use a JavaScript library: Zero Clipboard. This js library can support flash 10 copying to the clipboard. The principle of this method is to overwrite a dom element such as button or div on a transparent flash (not visible to the user). When clicking this dom, the actual clicking of flash is to access the flash clipboard.
Here are some examples of debugging:
The code copy is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Zero Clipboard Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javaScript">
var clip = null;
function $(id) { return document.getElementById(id); }
function init() {
clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
clip.addEventListener('mouseOver', function (client) {
// update the text on mouse over
clip.setText( $('fe_text').value );
});
clip.addEventListener('complete', function (client, text) {
//debugstr("Copied text to clipboard: " + text );
alert("This address has been copied, you can paste it with Ctrl+V.");
});
clip.glue('clip_button', 'clip_container' );
}
</script>
</head>
<body onLoad="init()">
<input id="fe_text" cols="50" rows="5" value="Copy content text">
<span id="clip_container"><span id="clip_button"><strong>Copy</strong></span></span>
</body>
</html>
Click to download this library: //www.VeVB.COM/jiaoben/24961.html
Please upload to the website during debugging. If you open flash directly locally, there will be an error, and there is no permission. The moviePath property in the zeroClipboard.js file is the address of falsh, which is the address location where ZeroClipboard.swf is stored in the directory.
This solution to copy content to the clipboard can support browsers: Firefox/IE/opera/chorme/safari All browsers!