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

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



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


结果执行的时候会有类似于下面的警戒提示:

python 无法import pyd_python

至于其他浏览器,使用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、就这些,谢谢!