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

众所周知，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把文字复制到系统剪贴板中，而不能把系统剪切板中的内容拷贝出来。