`
txf2004
  • 浏览: 6877146 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

 
阅读更多

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

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://www.clanfei.com/2012/05/926.html
欢迎访问交流,至于我为什么要多弄一个博客,因为我热爱前端,热爱网页,我更希望有一个更加自由、真正属于我自己的小站,或许并不是那么有名气,但至少能够让我为了它而加倍努力。。
=======================签 名 档=======================



分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics