用Flash按钮解决跨浏览器使用剪贴板的复制功能

以前有一个比较完美解决网页上复制按钮的方法,是通过JS调用SWF文件,让SWF文件做为一个中介来完成复制的功能(请看跨浏览器使用剪贴板),但最Adobe 发布了 Flash Player 10,一切就变了~,这个版本的 Flash Player 引入了不少新的安全特性,其中包括了对于一些敏感操作需要用户介入的内容。

新的 Flash Player 10 中,需要上载或下载数据、操作系统剪贴板的操作等都需要用户参与,也就是说要实现类似的“复制”功能,必须要让用户点击指定的按钮或设置快捷键才可以解决。这也就意味着之前可以自动操作剪贴板的 Flash 脚本都已失效了。于是乎,开心网啊,校内啊,他们的复制按钮都失效啦,提示复制成功,粘贴后却还是之前的内容。

像Google相册、YouTube的链接都是点击选中,需要用户Ctrl+C自行复制的,这也是一种解决方案,好过开心网那种提示成功却没成功~~

既然操作剪贴板的功能需要用户参与,那还是有解决方案的,做一个Flash的按钮让用户点击复制~~~

演示如下:

代码:

<embed width="62" height="24" align="middle"
flashvars="txt=http://www.foxling.cn"
src="/examples/as3/Copy/Copy.swf"
quality="high" wmode="transparent"
allowscriptaccess="sameDomain"
pluginspage="http://www.adobe.com/go/getflashplayer"
type="application/x-shockwave-flash">

把需要复制的内容,通过FlashVars传给Flash,然后通过System类的setClipboard方法可以将需要的内容复制到剪贴板,flash.system.System是一个静态类,包含与发生在用户计算机上的某些操作相关的属性,如具有共享对象的操作、摄像头和麦克风的本地设置和剪贴板的使用。访问剪贴板的数据是被禁止的,所以,没有getClipboard的方法:

private function copy(e:MouseEvent):void
{
    var txt:String = LoaderInfo(root.loaderInfo).parameters.txt;
    System.setClipboard(txt);
    createText("已复制");
}

在AS3中,取得FlashVars参数的方法与以前不一样了,AS3用parameters 属性替换了ActionScript 1.0 和 2.0 提供 SWF 文件参数作为主时间轴的技术。

parametersLoaderInfo对象的一个属性,对于加载的SWF等元素可以通过其Loader对像的contentLoaderInfo属性访问,由于SWF文件的主类的实例没有Loader对象,因此loaderInfo属性是访问SWF文件主类实例的LoaderInfo的唯一方法。

如果是Flex项目,可以通过Application.application.parameters.varname来访问FlashVars里的varname参数。

全部代码如下:

package {
	import flash.display.GradientType;
	import flash.display.LineScaleMode;
	import flash.display.LoaderInfo;
	import flash.display.Shape;
	import flash.display.SimpleButton;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Matrix;
	import flash.system.System;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;

	[SWF(width="62", height="24")]
	public class Copy extends Sprite
	{
		private var copyBtn:Sprite = new Sprite();
		private var btnText:TextField = new TextField();
		private const BTNWIDTH:Number = 60;
		private const BTNHEIGHT:Number = 22;

		public function Copy()
		{
			addChild(createButton());
		}

		private function createText(txt:String):void
		{
			var txtFormat:TextFormat = new TextFormat();
			txtFormat.align = TextFormatAlign.CENTER;
			btnText.text = txt;
			btnText.setTextFormat(txtFormat);
			btnText.width = BTNWIDTH;
			btnText.mouseEnabled = false;
			btnText.y = 2;
		}

		private function createButton():Sprite
		{
			createText("复制");

			var b:SimpleButton = new SimpleButton();
			b.upState = up();
			b.overState = over();
			b.downState = down();
			b.hitTestState = b.upState;
			b.addEventListener(MouseEvent.CLICK,copy);

			copyBtn.addChild(b);
			copyBtn.addChild(btnText);

			return copyBtn;
		}

		private function copy(e:MouseEvent):void
		{
			var txt:String = LoaderInfo(root.loaderInfo).parameters.txt;
			System.setClipboard(txt);
			createText("已复制");
		}

		private function up():Shape
		{
			return createShape([0xFFFFFF,0xCCCCCC]);
		}

		private function over():Shape
		{
			return createShape([0xFFFFFF,0xFFFFCC]);
		}

		private function down():Shape
		{
			return createShape([0xFFFFCC,0xFFFFFF]);
		}

		private function createShape(color:Array):Shape
		{
			var s:Shape = new Shape();
			var m:Matrix = new Matrix();
			m.createGradientBox(BTNWIDTH,BTNHEIGHT,-30,0,0);
			with(s.graphics){
				lineStyle(1,0xCCCCCC,1,false,LineScaleMode.NONE);
				beginGradientFill(GradientType.LINEAR,color,[1,1],[0,255],m);
				drawRoundRect(0,0,BTNWIDTH,BTNHEIGHT,5);
				endFill();
			}
			return s;
		}
	}
}

嗯~这个版本的缺点就是,要是用户禁用了Flash~~~

评论(4)

  1. lancelotwjq
    Posted 2009年06月19日 at 16:40 | Permalink

    赞!!!!!! javaeye 网站有个类似的复制代码的

  2. lancelotwjq
    Posted 2009年06月19日 at 16:48 | Permalink

    但按钮变成 “已复制” 后 ,能不能过几秒钟还原呢?

  3. Posted 2009年06月20日 at 15:35 | Permalink

    @lancelotwjq 可以的,多写点代码,设置一个定时器,复制后启动即可。

  4. Posted 2009年11月6日 at 16:10 | Permalink

    你好,可否提供一个源文件呢,我不太会整:(

    还有,能否实现这样,flash全透明,没有预设的文字,而是通过传递参数来控制大小,颜色,背景。能否帮忙制作一个,将非常感谢!!

One Trackback

  1. [...]   具体效果演示见本页下方的“本文链接地址”,点击旁边的“复制”按钮试试看!原理和详细解释看原文:《用Flash按钮解决跨浏览器使用剪贴板的复制功能》。 标签:使用技巧 + Twitter + GReader + 鲜果 + 豆瓣 + 人人网 + 开心网 + 新浪微博 + QQ书签 [...]

发表评论

Your email is never shared. Required fields are marked *

*
*