兼容各浏览器的复制内容到剪切板

    随着前端新技术的不断涌现，客户的需求也日新月异。比如说点击按钮或者其他DOM元素，复制指定的内容到剪切板。
    大家知道，现在各种浏览器出于安全的考虑，都不允许对剪切板的内容进行访问。
    在IE浏览器下，微软自己支持的window.clipboardData.setData('text', text);在IE7，IE8下，都会提示是否允许访问剪切板，如果不允许，在不刷新的情况下也不能访问剪切板内容。还有一个大的缺陷就是，对于textarea中的内容，使用
来进行转义换行的时候，复制出的内容实际上没有进行换行。
    而像firefox，chrome，safari，opera等浏览器，都没有提供使用js直接的访问剪切板内容的方法，所以要使用js或者jquery等js框架来操作剪切板的内容，并且兼容各个浏览器，就会黔驴技穷了。那是不是就没有办法了呢？
    当然不是，外国友人Joseph Huckaby所写的zeroclipboard.js库，就很好的解决了这个问题。
    一、原理
    Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。
    二、使用方法
    1.下载ZeroClipboard.js和ZeroClipboard.swf两个文件，放在同一目录下。
    注意：以上 ZeroClipboard.js, ZeroClipboard.swf如果不在同一路径，可使用ZeroClipboard.setMoviePath( “Flash路径” );来设置ZeroClipboard.swf 地址
    下载链接位于底部 ，文件名称为 2013
    2.引入js库
    <script type="text/javascript" src="ZeroClipboard.js"></script>
    注意：src的值，是自己的程序的需要而改变。
    3.添加js代码
    <script language="JavaScript">
  var clip = null; 
  function $(id) { return document.getElementById(id); } 
  function init() { 
  clip = new ZeroClipboard.Client();
  clip.setHandCursor(true); 
  clip.addEventListener('mouseOver', function (client){   
    clip.setText( $('fe_text').value );
  });
  clip.addEventListener('complete', function (client, text) {  
  alert("复制成功");
  });
  clip.glue('clip_button', 'clip_container');
  }
</script>
      4.页面body部分
      <textarea  rows="8" name=urlName id="fe_text">复制我啊</textarea>
      <span id="clip_container">
      <input type="button"   class="button" name="copy" id="clip_button" value="复&nbsp;制"/>
      </span>
     
      这样基本的复制功能就完成了。但是需要注意的是：
      1.本地不能测试，因为flash基于安全的考虑，本地访问会报错，将不起作用。
      2.必须安装flash，否则也起作用。
     
     _____________________________________________________________________________________
     Zero Clipboard的高级功能

     1、reposition() 方法

因为按钮上漂浮有一个Flash按钮，所以当页面大小发生变化时，Flash按钮可能会错位，这样就点不着了。 不要紧，Zero Clipboard 提供了一个 reposition() 方法，可以重新计算Flash按钮的位置。我们可以将它绑定到resize事件上。如下面代码是在jQuery下实现的resize事件重新设置按钮位置：

$(window).resize(function(){
clip.reposition();
});
2、hide() 和 show() 方法

这两个方法可以隐藏和显示Flash按钮 。其中 show() 方法会调用 reposition() 方法。

3、setCSSEffects() 方法

当鼠标移到按钮上或点击时，由于有Flash按钮的遮挡，所以像 css “:hover”, “:active” 等伪类可能会失效。setCSSEffects() 方法就是解决这个问题。首先我们需要将伪类改成类，比如：

#copy-botton:hover{
border-color:#FF6633;
}
// 可以改成下面的 ":hover" 改成 ".hover"
#copy-botton.hover{
border-color:#FF6633;
}
我们可以调用 clip.setCSSEffects( true ); 这样 Zero Clipboard 会自动为我们处理：将类 .hover 当成伪类 :hover 。

4、getHTML() 方法

如果你想自己实例一个Flash ，不用Zero Clipboard的附着方法，那么这个方法就可以帮上忙了。它接受两个参数，分别为Flash的宽度和高度。返回的是Flash对应的 HTML 代码。例如：

var html = clip.getHTML( 150, 20 );
你可以用 innerHTML 或直接 document.write(); 进行输出。
以下是测试输出的组装完毕的HTML 代码：

<embed id="ZeroClipboardMovie_1" src="zeroclipboard/ZeroClipboard.swf"
loop="false" menu="false" quality="best" bgcolor="#ffffff" width="150"
height="20" name="ZeroClipboardMovie_1" align="middle"
allowScriptAccess="always" allowFullScreen="false"
type="application/x-shockwave-flash"
pluginspage=http://www.macromedia.com/go/getflashplayer
flashvars="id=1&width=150&height=20" wmode="transparent" />
IE 的FlashJavaScript通信接口上有一个bug 。你必须插入一个object 标签到一个已存在的DOM元素中。并且在写入innerHTML之前请确保该元素已经appendChild方法插入到DOM 中。

Zero Clipboard 事件处理
Zero Clipboard 提供了一些事件，你可以自定义函数处理这些事件。Zero Clipboard 事件处理函数为 addEventListener(); 例如当 Flash 完全载入后会触发一个事件 “load” 。

clip.addEventListener( "load", function(client) {
alert("Flash 加载完毕！");
});
Zero Clipboard 会将 clip 对象作为参数传入。即上例中的 “client” 。
还有 “load” 也可以写成 “onLoad”，其他的事件也可以这样。
其他事件还包括：

mouseOver 鼠标移上事件
mouseOut 鼠标移出事件
mouseDown 鼠标按下事件
mouseUp 鼠标松开事件
complete 复制成功事件

其中 mouseOver 事件和 complete 事件比较常用。
前面说过，如果需要动态改变待复制的内容，那 mouseOver 事件就可以派上用场了。例如需要动态复制一个 id 为 test 的输入框中的值，我们可以在鼠标 over 的时候重新设置值。

clip.addEventListener( "mouseOver", function(client) {
var test = document.getElementById("test");
client.setText( test.value ); // 重新设置要复制的值
});
//复制成功：
clip.addEventListener( "complete", function(){
alert("复制成功！");
});