jQuery插件：跨浏览器复制jQuery-zclip

说明

jQuery-zclip是一个复制内容到剪贴板的jQuery插件，使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。jQuery-zclip插件需要Flash的支持，使用时记得安装Adobe Flash Player。

下载jquery-zclip，引入

<script src="${pageContext.request.contextPath}/resources/js/jquery.zclip.js"></script>

用法

<script>

    $(document).ready(function(){
        $('.copy_input').zclip({
            path: '${pageContext.request.contextPath}/resources/js/ZeroClipboard.swf',
            copy: function(){//复制内容
                return $(this).attr("linkvalue");
            },
            afterCopy: function(){//复制成功
                //$("#tipalert").show()
               alert("复制成功")
            }
        });
    });
</script>
 <td style="min-width: 100px;">
   <div style="position: relative;">
        <a style="cursor: pointer;width: 100px" class="copy_input"                               linkvalue="${item.linkUrl}">复制到剪切版</a>
    </div>
 </td>

参数说明

path:swf的路径(复制主要是用flash解决不同浏览器的复制)
copy:待复制的内容, 可以是静态内容, 也可以 return 动态内容
beforeCopy:复制之前要做的function;
afterCopy:复制之后要做的function;

jquery-zclip跨浏览器复制实现原理

jquery选择器调用zclip方法时，会在引用zclip方法的选择器下面生成一段embed元素，如下

<td style="min-width: 100px;">
     <div style="position: relative;">
         <a style="cursor: pointer;width: 100px" class="copy_input" linkvalue="http://baidu.com">复制到剪切版</a>
         <div class="zclip" id="zclip-ZeroClipboardMovie_1" style="position: absolute; left: 0px; top: 2px; width: 84px; height: 16px; z-index: 99;">
         <embed id="ZeroClipboardMovie_1" src="/admin/resources/js/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="84" height="16" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&amp;width=84&amp;height=16" wmode="transparent">
           </div>
    </div>
</td>

这段embed会覆盖定义<a> 位置，使我们点击<a> 标签时实际点击的是embed这段元素。

遇到问题

点击<a> 标签复制到剪切版不生效，原因是 embed元素没有覆盖<a>标签，所以才会复制失败。此时在浏览器中打开F12模式，可选中<embed>这段元素找到页面上相应的位置，再点击，发现复制成功了。此时只需要将 zclip 生成的 <embed>元素位置定位到<a>标签上就可以解决些问题。所以需在定义点击事件的元素外层加一个<div>，设置样式position:relative 就可以了，最终页面源码如下：

 <td style="min-width: 100px;">
   <div style="position: relative;">
      <a style="cursor: pointer;width: 100px" class="copy_input" linkvalue="${item.linkUrl}">复制到剪切版
      </a>
   </div>
 </td>