ZeroClipboard,通过flash实现兼容所有浏览器的“复制到剪贴板”功能

由于Firefox和Webkit内核的浏览器不支持js直接操作剪贴板,所以要在WEB页面实现《把内容复制到剪贴板》功能,需要借助Flash实现。

普遍流传的方法是通过_clipboard.swf实现,包括我也先找到这个方法,简单地通过js插入flash即自动复制,相当简便,可惜,失败了。原因是Flash10规定只能在swf上进行直接操作才能启动剪贴板从而实现复制。

解决方案:

ZeroClipboard 组件,包括 ZeroClipboard.js 和 ZeroClipboard.swf 两个文件。

组件原理是在触发复制动作的元素正上方复制透明的FLASH组件,从而通过点击来触发复制动作。

Zero Clipboard项目主页:http://code.google.com/p/zeroclipboard/

演示地址:http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

使用说明:

  1. 在HTML中导入JS文件

     <script type="text/javascript" src="ZeroClipboard.js"></script>
    
  2. 在JS中设置SWF路径、设置复制动作

     //设置SWF路径
     ZeroClipboard.setMoviePath( "ZeroClipboard.swf" );
      
     //新建一个对象
     var clip = new ZeroClipboard.Client();
     //设置鼠标为手型
     clip.setHandCursor( true );
     //设置要复制的文本
     clip.setText("哈哈");
     //设置要触发复制动作的元素id
     clip.glue("CopyButton");
    
  3. 其他触发动作

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

     //此方法引需要有JQuery的支持
     $(window).resize(function(){   
         clip.reposition();   
     });
    
    • Zero Clipboard 事件处理方法:
    • load Flash加载完成事件
    • mouseOver 鼠标移上事件
    • mouseOut 鼠标移出事件
    • mouseDown 鼠标按下事件
    • mouseUp 鼠标松开事件
    • complete 复制成功事件

    绑定以上动作的例子:

     clip.addEventListener( "load", function(client) {   
         alert("Flash 加载完毕!");   
     });
    

意外状况:

  1. 由于ZeroClipboard里有定义$,有可能与JQuery产生冲突。我的做法是把ZeroClipboard.js文件中的$全部换成另一个变量代替,我用了ZeroC替换所有$。

  2. 由于ZeroClipboard是在body末插入FLASH,而它必须覆盖在按钮上方才能得到鼠标的点击。ZeroClipboard.js源文件中定义FLASH的层默义z-index为99,当按钮元素有z-index定义时,在元素基础上增加,却忽略了其父元素。最简单的方法是把z-index定义为一个极大的数,保证其在最上方,我用的是9999999。若遇到此问题,请搜索zIndex而非z-index,自行理解并处理。

参考:http://www.cnblogs.com/suyuan/articles/1790237.html

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏