跨浏览器“复制到剪贴板”的解决方案
众所周知,firefox的安全性比较高,但是安全带来的弊端就是很多功能不支持。比如说在IE下可以通过脚本来设当前网页为首页,firefox却不行。今天要讨论的是另外一个问题:怎么在firefox等不支持window.clipboardData的浏览器下实现复制呢?
首先,我们来看网易邮箱是怎么解决这个问题的。我们在firefox下进到写邮件页面,点击编辑器上的全部功能,然后点击左边的“复制”按钮,“您的浏览器安全设置不允许编辑器自动执行拷贝操作,请使用键盘快捷键(Ctrl+C)来完成”,网易邮箱给了我们这么一个提示。我觉得这个解决方案可以得80分,因为它告诉了我们两个信息:其一,之所以复制操作没有完成是因为我的浏览器很安全,为了安全损失一点用户体验一般用户是可以接受的;其二,它还提示了我们可以通过键盘快捷键ctrl+c来完成操作,这对刚上网的新手来说很人性化。但是,有没有更好的解决方案呢?
网上大致有两种解决方案,一种是需要修改firefox配置,其实firefox也是支持复制的,但是需要到about:config里去手动开启,这里不做介绍了;另外一种解决方案是本文要用到的flash。因为flash可以方便的把文字拷贝到系统剪切板中,所以我们利用flash来做跳板,只需要一行代码就能搞定:
System.setClipboard(clipboard);
这句代码的含义后面还会提到。有了这个swf的跳板,剩下的工作就简单了,如果浏览器不支持window.clipboardData,就在复制的时候把内容传给这个flash,就OK了,关键代码如下:
window.clipboardData.setData("Text",str);
}else{
var flashId = '_clipboard_';
var flashContent = '<embed src="clipboard.swf" FlashVars="clipboard='+str.replace(/\+/g,"%2b")+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
if(!document.getElementById(flashId)){
var flash = document.createElement("div");
flash.id = flashId;
flash.innerHTML = flashContent;
document.body.appendChild(flash);
}else{
document.getElementById(flashId).innerHTML = flashContent;
}
}
adobe的文档中对setClipboard有如下解释:
setClipboard () 方法
public static function setClipboard(string:String):void
语言版本 : ActionScript 3.0
Player 版本 : Flash Player 9 用指定的文本字符串替换剪贴板的内容。
注意:出于安全方面的考虑,您无法读取系统剪贴板的内容。 换句话说,不存在相应的
System.getClipboard()方法。参数
string:String— 要放置在系统剪贴板上的纯文本字符串,用于替换系统剪贴板上的当前内容(如果有)。
由此可见,我们只能利用flash把文字复制到系统剪贴板中,而不能把系统剪切板中的内容拷贝出来。
