您的位置:首页 > 其它

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

2012-05-07 03:12 351 查看
众所周知,在网页中若想实现点击按钮自动复制到剪贴板中可以用以下代码实现:

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>


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

点此查看Demo

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

点此下载源文件

=======================签 名 档=======================

原文地址(我的博客):http://lanfei.sinaapp.com/2012/05/926.html

欢迎访问交流,至于我为什么要多弄一个博客,因为我热爱前端,热爱网页,我更希望有一个更加自由、真正属于我自己的小站,或许并不是那么有名气,但至少能够让我为了它而加倍努力。。

=======================签 名 档=======================
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: