跨浏览器的“复制到剪贴板”

众所周知,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,"+") '" 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有如下解释:

NOTE Because of security concerns, it is not possible to read the contents of the system Clipboard. In other words, there is no corresponding System.getClipboard() method.

由此可见,我们只能利用flash把文字复制到系统剪贴板中,而不能把系统剪切板中的内容拷贝出来。

本文链接:参与评论 »

--EOF--

提醒:本文最后更新于 3042 天前,文中所描述的信息可能已发生改变,请谨慎使用。

Comments