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

这篇文章发布于 2010年08月17日,星期二,21:01,归类于 Graphic相关, JS实例。 阅读 102298 次, 今日 6 次 28 条评论

 

补充于2018-01-01: 现在,基本上各大浏览器都支持了Clipboard API,虽然都是部分支持,但是基本文字复制等是OK的,所以本文内容过时。

一、单纯的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://libs.baidu.com/swfobject/2.2/swfobject.js" type="text/javascript"></script>

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

说明:因外链惊人,使用百度CDN公共库上的swfobject.js, 原JS我置空了

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、就这些,谢谢!

(本篇完)

分享到:


发表评论(目前28 条评论)

  1. 123说道:

    function copyPhonenumber(phonenum){
    var num = phonenum;
    var flashvars = {
    content: encodeURIComponent(phonenum),
    uri: ‘/js/copyflash/flash_copy_btn.png’
    };
    var params = {
    wmode: “transparent”,
    allowScriptAccess: “always”
    };
    swfobject.embedSWF(“/js/copyflash/clipboard.swf”, “forLoadSwf”, “52”, “25”, “9.0.0”, null, flashvars, params);
    }

    function copySuccess(){
    //flash回调
    alert(“复制成功!”);
    }

  2. leamo说道:

    回调函数不起作用怎么破?这个问题一直没有回复呢

  3. pppppp6说道:

    这个是不兼容手机的吗?

  4. a说道:

    额 有个小问题 这个只能复制一次到剪切板 第二次复制的时候还是第一次的内容 您提供的例子也一样

  5. jesse说道:

    如果有多个内容需要复制呢,用id是不是有局限性啊

  6. 云哥说道:

    为什么必须服务器环境呢?

  7. 彼岸花说道:

    flas回调不起作用怎么破

  8. 少壮说道:

    你好,请问这样做的话可能被adblock给干掉,这种情况应该怎么处理呢

  9. 谢亮说道:

    看了大神的代码, 试着写了个…
    http://www.xuexb.com/demo/copy/copy.html

  10. 谢亮说道:

    您好, 能不能提供下fla的文件啊, 最近在搞这东东

    • 张 鑫旭说道:

      @xiamu 你好,被我清空了,因为外链流量惊人。您可以是使用下面这个链接:http://libs.baidu.com/swfobject/2.2/swfobject.js

  11. 轩枫说道:

    回调函数不生效怎么办

  12. ForEcho说道:

    很给力 谢谢

  13. feeloc说道:

    如果改变了文本类型,如何复制修改后的内容呢?

  14. Shura说道:

    无效,不能在本地使用

  15. blueforest说道:

    下载到本地的回调不起作用啊…

  16. 阿牛说道:

    好很好,非常好,百度+GG+N多博客看了相关的文章都没能很好的解决这个问题,楼主的方法完美解决,谢谢很想捐赠共免,由于是穷人,不小心误点了右上角300*300的图片,希望其他朋友不要误点哈
    -_-

  17. tonyjian说道:

    页面上多个调用,回调函数怎么搞

  18. huan.wang说道:

    首先clipboard.swf做的剪切板很不错,兼容性很好。其次恭喜你把内容写死了,你添加几个字再复制试试。最后想请教一下达人,如果内容不是文字而是一个带样式的网页,应该怎么复制。
    试试在本页面ctrl+a然后ctrl+c再找一个邮件或者word打开后ctrl+v。你会发现内容不但是文字,还有本页的样式,如何实现。请赐教,huan19890109.com@163.com

  19. szt说道:

    回调方法没起作用啊。

  20. fei441544558说道:

    你讲的真的不错,看了你的讲解,可解决了我的一个大难题。

  21. Oopen-Lib说道:

    你好,这篇文章我转走啦..

    http://www.open-lib.com/Forum/Read_72_1.action
    已保留转载来源.

  22. 马作的卢说道:

    朋友,这个东东真不错! 给你赞一个.
    现在我就把这个东西嵌到我的页面上了.呵呵!

  23. 随缘说道:

    真不错,DZ一类论坛程序用到这个复制功能

  24. 芹菜说道:

    沙发啊。

    以前挺自信地说CSS不难,看了你的文章之后,发现以前知道的都是牛毛,要学习的还有很多。
    恩。要加油了。