ZeroClipboard实现复制功能，做到浏览器兼容

来源：互联网发布：惠州网络英才网编辑：程序博客网时间：2024/06/04 20:01

公司有个项目最近要优化一下，其中有个业务就是要实现复制功能，并且兼容大多数浏览器，之前的是使用IE的window.clipboardData.setData()方法实现的，判断如果是不是IE则弹出alert()....只能支持IE浏览器，不能做到兼容，而优化项目的时候这个小块是我负责。

没有做过这种功能，听都没听过，就百度、谷歌一起来，最终网上的方法就是有一个欧洲大神封装的一个jQuery插件可以实现复制功能，并且可以兼容浏览器，但必须有服务器服务器和flash，我一想这不就是我要寻求的吗，随之开始深入了解，这个插件使用起来很简单，只需要jQuery文件、ZeroClipboard.swf文件和ZeroClipboard.js文件，在网上轻松可以找到下载的。本文最后也有链接免费下载
1、首先引入jQuery.js和ZeroClipboard.js

<script type="text/javascript" src="<%=basePath%>js/jquery.js"></script><script type="text/javascript" src="<%=basePath%>js/ZeroClipboard.js"></script>

ZeroClipboard.swf文件如果和ZeroClipboard.js文件放在一起可以不设置ZeroClipboard.swf文件，会自动加载，但尽量设置一下。
2、在页面上

<body><textarea id="testText" cols="30" rows="5" onChange="zeroClipboard.setText(this.value)">复制</textarea>        <div id="containers" style="position:relative">            <div id="clip_button">复制到剪贴板</div>        </div></body>

3、在js上

<script type="text/javascript">            var zeroClipboard = null;            $(function() {                ZeroClipboard.setMoviePath("<%=basePath%>js/ZeroClipboard.swf");//设置flash文件路径                zeroClipboard = new ZeroClipboard.Client();                zeroClipboard.setHandCursor( true );//变成手型                zeroClipboard.addEventListener("load", function (client) {//监听事件，当全部load加载完毕F12会提示                    console.log("Flash文件加载完毕。");                });                zeroClipboard.addEventListener("mouseOver", function (client) {//修改会执行zeroClipboard的复制方法                    zeroClipboard.setText( $("#content").val() );                });                zeroClipboard.addEventListener("complete", function (client, text) {//复制完成会alert提示                    alert("复制成功" + text );                });                zeroClipboard.glue( "clip_button", "containers" );            });        </script>

在步骤3中

zeroClipboard.glue( "clip_button", "containers" );

可以设置为

    zeroClipboard.glue( "clip_button");

这样简单一些，但可能会造成定位不准确的问题，会复制失败，没有反应。而在步骤2中

 style="position:relative"

当设置为zeroClipboard.glue( "clip_button"); 时为了保证定位准确可以这样来保证定位准确，这个好像是进行相对位置布局。

在其他页面上知道的：

flash的相对浮动

这里还提供了一种更巧妙的方式：如果按钮的上层有任何position:relative的块状元素，比如div，而按钮和这个块状元素的位置又是相对固定的，那么可以在调用glue函数时，将这个div的id作为第二个参数传进去，不过同时reposition这个api就失效了。比如：

clip.glue( ‘clip-button-id’, ‘clip-container-id’ );

基本上以上可以复制一下，就是一个可以用的Hello word了。

下面是两个文件下载地址，可以提供免费下载
jQuery1.9.1：http://download.csdn.net/detail/p_doraemon/9909182
zeroClipboard所需的两个文件：
http://download.csdn.net/detail/p_doraemon/9909186

阅读全文

1 0