以前有一个比较完美解决网页上复制按钮的方法,是通过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 文件参数作为主时间轴的技术。
parameters是LoaderInfo对象的一个属性,对于加载的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)
赞!!!!!! javaeye 网站有个类似的复制代码的
但按钮变成 “已复制” 后 ,能不能过几秒钟还原呢?
@lancelotwjq 可以的,多写点代码,设置一个定时器,复制后启动即可。
你好,可否提供一个源文件呢,我不太会整:(
还有,能否实现这样,flash全透明,没有预设的文字,而是通过传递参数来控制大小,颜色,背景。能否帮忙制作一个,将非常感谢!!
One Trackback
[...] 具体效果演示见本页下方的“本文链接地址”,点击旁边的“复制”按钮试试看!原理和详细解释看原文:《用Flash按钮解决跨浏览器使用剪贴板的复制功能》。 标签:使用技巧 + Twitter + GReader + 鲜果 + 豆瓣 + 人人网 + 开心网 + 新浪微博 + QQ书签 [...]