Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

使用AS实现复制到剪切板

  看到有人遇到这个问题,就来写篇文章说一下吧。JS操作剪切板在IE上一直都是可以实现的,只不过到了IE8之后就会跳出用户确认框。 clipboardData.setData("Text","次碳酸钴");
  而IE之外的浏览器对剪切板的支持就更是参差不齐了,所以我们需要找到一个统一的方法来解决这个问题。既然JS不行那就换AS来吧,AS中可以调用flash.system命名空间下的System对象的setClipboard方法来写入剪切板。但是这个方法也不能随心所欲的调用,因为在FlashPlayer10以后,由于安全性的考虑很多功能都需要用户在Flash上做实质的操作后才能在事件中使用。这个方法也不例外,所以我们只能生成一个透明的Flash来让用户点击以触发事件。下面是HTML中的部分 <style>
.copy {display:inline-block;position:relative;overflow:hidden;}
.copy object {position:absolute;left:0px;top:0px;width:100%;height:100%;}
</style>
<script>
function Clipboard_reciver(){
  return data.value;
};
function Clipboard_success(){
  alert("复制成功");
};
</script>
<input value="次碳酸钴" id="data" />
<a class="copy" href="JavaScript:;">
  复制到剪切板
  <object type="application/x-shockwave-flash"
          id="clipboard" data="Clipboard.swf">
    <param name="movie" value="Clipboard.swf" />
    <param name="wmode" value="Transparent" />
  </object>
</a>

  OBJECT元素下参数列表中的wmode参数设置为Transparent就可以让Flash的背景透明。但是在低版本浏览器中,对没有设置背景的Flash是不会响应点击事件的。所以我们必须给Flash设置上背景,也就是在舞台上填充一个不透明度为0的背景颜色。这个操作可以在后面的AS代码中有注释,看到自然会明白。上面代码中的JS部分是定义两个函数让AS来调用,一个是用来获取需要写入的文本,另一个是复制完成之后调用的。这个可以在随后的AS代码中找到接口。 package {
  import flash.display.*;
  import flash.system.System;
  import flash.events.MouseEvent;
  import flash.external.ExternalInterface;
  public class Clipboard extends Sprite {
    public function Clipboard(){
      //绘制背景,颜色0,不透明度0
      graphics.beginFill(0,0);
      graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
      //舞台设置为自动缩放模式
      stage.scaleMode=StageScaleMode.EXACT_FIT;
      //舞台上添加点击事件
      stage.addEventListener(MouseEvent.CLICK,function(){
        //设置剪切板文字
        System.setClipboard(
          //从JS的函数中获取需要设置的文字
          ExternalInterface.call("Clipboard_reciver")
        );
        //完成后调用的JS函数
        ExternalInterface.call("Clipboard_success");
      });
    };
  };
};
  这样就可以在点击事件中写入剪切板了。据说谷歌也有一个类似的插件,叫做ZeroClipboard。也是用AS实现的,只是它封装的更方便而已。我更喜欢用自己写的,编译成swf后才700多字节,下面是本文使用的例子的下载连接。
  使用AS实现复制到剪切板.rar
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^