js+flash(as3)实现复制文字内容到剪切板

72 阅读 0 评论 48 点赞

我是靠谱客的博主落后蜻蜓，最近开发中收集的这篇文章主要介绍js+flash(as3)实现复制文字内容到剪切板，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、单纯的js复制文字到剪切板较啰嗦

单纯的js复制文字到剪切板较啰嗦，由于考虑到安全性等原因，使用类似点击按钮这类复制文字内容的操作往往多有限制，例如IE浏览器下可以使用类似下面的方法复制一段文字到剪切板：

if(window.clipboardData) {
    window.clipboardData.clearData();
    window.clipboardData.setData("text", "这是复制的文字");
}

结果执行的时候会有类似于下面的警戒提示:
IE下复制文字的安全提示张鑫旭-鑫空间-鑫生活

至于其他浏览器，使用js实现也是比较啰嗦的，貌似好需要对浏览器进行一些设置，例如火狐Firefox浏览器被需要在浏览器地址栏输入’about:config’并回车，然后将’signed.applets.codebase_principal_support’设置为’true’才行，显然，不是个什么好方法。

所以，总的来看，使用js实现文字等内容的复制不是个好方法。

二、使用Flash做媒介轻松实现复制

既然，js实现文字的复制有点啰哩吧嗦的，我们可以转向其他的方法，例如JavaScript的近亲，ActionScript。一般而言，Flash是不存在兼容性的问题，只有支持与不支持。在AS3下，实现文字复制的方法有几个，我这里使用的是：

Clipboard.generalClipboard.setData(ClipboardFormats.TEXT_FORMAT, "这里是复制的文字内容");

很简单吧。现在有些麻烦的是与页面js的传参与交互。

AS3下获取外部传递的参数，可以使用：

var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;

然后通过paramObj["参数名"]就可以获得外部具体的参数了。

我们还需要给js一个回调，告诉使用者是否复制成功。可以使用：

ExternalInterface.call("js方法");

我们可以使用flashvars将要复制的文字传给Flash，通过Flash讲文字复制到剪切板上，同时回调给页面上的js。

然后，还有一点，由于安全性的原因，后来的Flash版本只支持点击事件以及键盘事件的复制，所以考虑到兼容性，我决定使用Flash按钮触发复制文字内容到剪切板。同时考虑到扩展性，所以按钮图片从外部使用Loader类调用。于是，我们总共需要两个参数，一是要复制的文字内容，二是按钮图片路径。

关于Flash接受参数，复制，回调等我都已经写好了，您所要所的就是在js脚本上设置些参数就好了，具体使用见下面。

三、js+flash(cs3)实现复制文字内容到剪切板

本实例我的是使用SWFObject2.0脚本转载Flash，关于SWFObject2.0，您可以参见网易的“SWFObject2.0: 基于Javascript的Flash媒体版本检测与嵌入模块”这篇文章，对于此脚本的使用里面有着非常详细的介绍。

具体步骤如下，
1.调用SWFObject2.0脚本，如下：

<script src="http://www.zhangxinxu.com/Scripts/swfobject_modified.js" type="text/javascript"></script>

我上面的这个swfobject脚本是由Dreamweaver生成的。

2. 给设定Flash的一些参数，假设我们要复制的值来自一个id为“zxxTestArea”的文本域，则一些设置如下：

var copyCon = document.getElementById("zxxTestArea").value;
var flashvars = {
    content: encodeURIComponent(copyCon),
    uri: '../image/flash_copy_btn.png'
};
var params = {
    wmode: "transparent",
    allowScriptAccess: "always"
};

其中，flashvars中content指的是要复制的文字内容，uri是按钮图片的路径。params是设置Flash本身的一些属性，其中wmode不是必须的，但是allowScriptAccess是需要的，跨域处理安全沙箱等问题需要。

3. 传参并显示Flash

swfobject.embedSWF("../js/clipboard.swf", "forLoadSwf", "52", "25", "9.0.0", null, flashvars, params);

上面参数分别表示的是“flash的地址”，“用以装载并替换的HTML节点id”，“flash的宽”，“flash的高”，“flash版本”，“flash Player更新安装的swf调用地址”，“传给flash的参数”，“flash本身的一些参数”。

例如页面上有这么段HTML：

<span id="forLoadSwf"></span>

则此span标签就会被替换成flash，id也赋予给flash。

4. 回调给js
我在swf文件中给了js一个回调方法，方法名为“copySuccess”，例如：

function copySuccess(){
    //flash回调
    alert("复制成功！");
}

查看具体实际的效果，您可以狠狠地点击这里：js+flash(cs3)复制文字到剪切板demo

下载
关于此flash文件以及demo页面我已经打包成zip文件了，您可以狠狠地点击这里：zxx_clipboard.zip(右键-[目标|链接]另存为)

四、其他一些说明

1、我已经设置了舞台元素大小不随着flash大小改变而拉伸，同时按钮图片左上角显示，所以，您可以放心大胆的将swf的高宽设置成按钮图片的高宽。
2、可能是自己多事，我给按钮添加了一个透明度改变的hover效果，也就是移到flash装载的图片按钮上时，此按钮透明度为变成80%，移出时又变成100%透明度。
3、由于使用语调用都非常简单明了，不像同样采用flash交互的uploadify插件复杂，所以，这里没有将其插件化。
4、参数名以及回调函数的名称都是固定的，如果您使用其他的参数名则不会有效果的。其中您可以在回调的copySuccess方法添加一些更加人性化的提示方式。
5、demo页面第二个文本域是方便您测试的，可以随时通过粘贴的方式检测是否确实复制成功。
6、就这些，谢谢！

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1037