html复制到剪贴板-JS复制内容到剪贴板：兼容IE、Firefox、Chrome、Safari全部

文本：

现在浏览器的种类越来越多，比如IE、Firefox、Chrome、Safari等，所以要实现js复制内容到剪贴板的一个小功能并不是那么容易。

在FLASH9时代，有一个解决方案可以杀死所有浏览器的js来复制内容到剪贴板：

此解决方案是最流行的方法之一：众所周知的 ClipboardCopy 解决方案使用 Clipboard.swf 作为将内容复制到剪贴板的桥梁。

原理是：创建一个隐藏的flash文件，同时给flash变量FlashVars赋予形参“clipboard=..”，通过这个形参flash会将复制的内容放到剪贴板上。 此方法兼容IE、Firefox、Opera、chrome、Safari，堪称“万能”解决方案。 Flash浏览器的安装率特别高，几乎是完美的解决方案。

JS部分：

 
  var clipboardswfdata;
  var setcopy_gettext = function(){
    clipboardswfdata = document.getElementById('test_text').value;
    //alert(clipboardswfdata);
    window.document.clipboardswf.SetVariable('str', clipboardswfdata);
  }
  var floatwin = function(){
    alert('复制成功！');
  //document.getElementById('clipinner').style.display = 'none';
  }

 

HTML部分：

文本內容
 
  
複製代碼到剪貼簿
    
    
  
 

Clipboard.swf下载地址：_clipboard.rar.rar

然而到了Flash10的时代，里面的方法早已消亡了。

由于flash10规定只有对swf进行真正的操作（比如键盘点击）才能访问剪贴板html复制到剪贴板，而上述方法只是使用了一个隐藏的swf文件通过javascript来操作flash的剪贴板，用户没有任何访问权限swf 文件执行真实操作，因此该方法无效。

那么如何解决这个“实际操作”问题呢？ 你可以使用一个JavaScript库：ZeroClipboardhtml复制到剪贴板，通过这个js库你可以支持用flash10复制到剪贴板。 该方法的原理是在透明的flash上​​（用户不可见）叠加一个button或者div等dom元素。 当点击dom的时候，实际上是点击了flash，然后访问了flash的剪贴板。

飘逸使用我调试过的小反例：

  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("该地址已经复制，你可以使用Ctrl+V 粘贴。");
  	});
 
  	clip.glue('clip_button', 'clip_container' );
  }


 


复制

票易提供的案例下载：zeroclipboard.rar

调试时请上传至网站。 如果直接本地打开flash会出错，没有权限。 ZeroClipboard.js文件中的moviePath属性是falsh的地址，也就是ZeroClipboard.swf在目录中存放的位置。

这些复制内容到剪贴板的js解决方案可以支持浏览器：Firefox/IE/opera/chorme/safari所有浏览器！

参考：