方便、简洁:Flash AS3实现多浏览器兼容复制按钮

蓝飞 蓝飞 | 时间:2012-05-06, Sun | 16,174 views
前端开发 

众所周知,在网页中若想实现点击按钮自动复制到剪贴板中可以用以下代码实现:

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

但可惜的是,这种方式只支持IE内核浏览器。

而对于浏览器来说,Flash不存在兼容性问题,因此我们可以通过ActionScript来实现复制:

System.setClipboard("你要复制的内容");


而网页中要做的是显示并通过flashvars将内容传给Flash。

<object type="application/x-shockwave-flash" data="clipboard.swf" width="16" height="16" id="clipboard" style="position:absolute;">
	<param name="wmode" value="transparent">
	<param name="allowScriptAccess" value="always">
	<param name="flashvars" value="content=要复制的内容">
</object>

也有一种更加简洁的方法:

<embed width="16" height="16" type="application/x-shockwave-flash" allowscriptaccess="always" wmode="transparent" flashvars="clipboard=要复制的内容" menu="false" src="clipboard.swf" />

当然现在只是一片空白,怎么给它加上图片或者文字呢?

<div style="position:relative;">
	<object type="application/x-shockwave-flash" data="clipboard.swf" width="100%" height="100%" id="clipboard" style="position:absolute;">
		<param name="wmode" value="transparent">
		<param name="allowScriptAccess" value="always">
		<param name="flashvars" value="content=要复制的内容">
	</object>
	<a href="#">复制</a>
</div>

<div style="position:relative;">
	<embed width="16" height="16" type="application/x-shockwave-flash" allowscriptaccess="always" wmode="transparent" flashvars="clipboard=要复制的内容" menu="false" src="clipboard.swf" style="position:absolute;" />
	<a href="#">复制</a>
</div>

若要显示图片的话就直接将<a href="#">复制</a>换成<img src="图片地址" />即可,当然还要注意修改Flash的大小使之与文字或图片匹配,效果如同代码高亮右上角复制按钮。

点此查看Demo

下载clipboard.swf(右键另存为)

下载源文件

如需转载请注明出处:蓝飞技术部落格

8 条评论 »

  1. 蓝风火火 蓝风火火

    首先感谢分享这个按钮,但是AS3似乎和IE8不怎么兼容...怎么把它降低成AS2等低版本...本人不懂flash

    1. 蓝风火火 蓝风火火

      [可怜] 事实上是object和embed都不是在最顶层...都被链接遮住了.咋办啊.

  2. 蓝风火火 蓝风火火

    经过小菜我的研究,发现wmode="transparent"导致swf失效...可是偶又不知道咋解决.

  3. 蓝风火火 蓝风火火

    [鼓掌] 经过按一天加一夜的百度Google,导致设置透明以后,IE点击不到的原因是swf的舞台为空.偶的解决方法是在开始帧添加一个图片背景,并设置为透明.

    1. 嗯,这种方法应该可以解决。
      抱歉哦,最近在准备英语四级考试和期末考,所以没怎么上博客。。。

    2. 已更新,多谢提醒^_^

  4. 学习 学习

    请教一下 我下在了源文件 为什么打开网页的时候点击按钮没有反应啊? 是不是要在什么特殊环境下才可以呢?

    1. 是否有Flash环境呢?