跨浏览器“复制到剪贴板”的解决方案

In: 前端开发

9 08 2008

众所周知,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了,关键代码如下:

if (window.clipboardData){
    
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把文字复制到系统剪贴板中,而不能把系统剪切板中的内容拷贝出来。

再来看看这些吧

4 Responses to 跨浏览器“复制到剪贴板”的解决方案

Avatar

博浪

01月 23rd, 2009 at 4:26 am

请问上面这段代码添加在什么地方?

Avatar

恩恩

01月 25th, 2009 at 11:18 pm

flashplayer10不通过,9未测试

Avatar

恩恩

01月 25th, 2009 at 11:19 pm

FP10不通过
9未测试

Avatar

Jerry Qu

01月 26th, 2009 at 1:44 am

Fp9下是好的,10更新了安全策略,不允许脚本调用setClipboard!

Comment Form

关于我

JerryQu,当前从事前端开发,@中国北京
这里是我随便记录东西的地方~
需要找我,我的联系方式在这里 »
查找QGYWebim相关信息,请点这里 »

  • 来无影: 这个站的模板不错,我很喜欢![:13 [...]
  • 莞尔: 我用了你的表情插件发现一个问题 那就是路径问题 我的WP没有放在根目录 [...]
  • samuel: 很棒。你自己写的demo,比去看jquery代码简单多了 [...]
  • samuel: 非常棒,很有参考价值。比去看jQuery代码舒服多了 [...]
  • 风剪云: 向你学习了。BS无德之人,拿去用也罢了。居然还拿去赚钱。[:11 [...]
  • nvshao: [:20]不错不 [...]
  • 团伙创意: bu cuo 不错 学习啦~ [...]
  • 3g培训: 再来看看。上班没事干。还是希望看到新文 [...]

共享