Compatible with the mainstream browser JS copy content to the clipboard

2020-03-30 04:35:27
OfStack

Now that there are more and more browsers such as Internet explorer, Firefox, Chrome, Safari, etc., it is not so easy to implement a small function of js to copy content to the clipboard.

In the FLASH 9 era, there was a scheme to copy content to the clipboard by killing all browser js :

This project is one of the most popular method: (link: http://www.jeffothy.com/weblog/clipboard-copy/) with a clipboard. SWF as Bridges, copy the contents to the clipboard.

How it works: create a hidden flash file while assigning "clipboard=.." to the flash variable FlashVars. With this assignment flash places the copied content on the clipboard. This method is compatible with Internet explorer, Firefox, Opera, chrome, and Safari. The browser Flash installation rate is very high, this is almost a perfect solution.



<!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 developers  - 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 successful! ');

        //document.getElementById('clipinner').style.display = 'none';

    }

</script>

</head>

<body>

<textarea id="test_text" rows="15" cols="100"> Text � capacity .......</textarea>

<div id="clipboard_content"> 

  <div class="my_clip_button"><span class="clipinner" id="clipinner"> Copy the code to the clipboard 

    <embed name="clipboardswf" class="clipboardswf" id="clipboardswf" onmouseover="setcopy_gettext()" devicefont="false" src="./_clipboard.swf" menu="false" allowscriptaccess="sameDomain" swliveconnect="true" wmode="transparent" type="application/x-shockwave-flash" height="20" width="100">

    </span>

  </div> 

</div>

</body>

</html>

Clipboard. SWF download address: (link: http://www.jeffothy.com/weblog/uploads/clipboard.php)

But in the age of Flash 10, the above method has failed.

Because flash10 states that only real operations (such as mouse clicks) on SWF can access the clipboard, and the above method only USES a hidden SWF file, through javascript operation flash clipboard, the user did not real operations on the SWF file, so this method is also invalid.

Here are some examples of good debugging:



<!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(" The address has been copied, you can use it Ctrl+V  Paste. ");

    });

 

    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 the class library: (link: #)

When debugging, please upload to the website, the local direct flash will be wrong, no permission. The moviePath property in the zeroclipboard.js file is the address of falsh, which is the address of zeroclipboard.swf in the directory.