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

❗ 本文最后更新于 5948 天前，文中所描述的信息可能已发生改变，请谨慎使用。

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

本文链接：https://mailseason.com/post/flash-and-clipboard.html，参与评论 »

--EOF--

发表于 2008-08-09 17:04:47，并被添加「Flash、JavaScript、用户体验、跨浏览器」标签。查看本文 Markdown 版本 »

本站使用「署名 4.0 国际」创作共享协议，相关说明 »

JerryQu 的博客

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

Comments