杰拉斯的博客

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

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（右键另存为）

下载源文件

如需转载请注明出处：杰拉斯的博客

相关文章

• 新浪微博表情插件——jQuery Sina Emotion 3.0 发布
• [知乎]关于选择器优先级的计算
• [小积累]不同浏览器中阻止默认事件、冒泡的方法
• [纯耍帅] 纯CSS、兼容IE7+、宽度自适应、无限级导航菜单
• 借@阿里巴巴 耍了个帅——HTML5 JavaScript实现图片文字识别与提取