跨浏览器剪切板访问解决方案

在改善”小可”(http://code.wanz.im/)的使用体验的过程中遇到一个问题,那就是需要通过JavaScript将Ajax返回得到的URL复制到剪切板,我第一想到的就是下面的代码

很不幸的是,这句是IE ONLY的,于是需要兼容.后来我找到一段代码,我以为除了IE外,其他的都可以使用.

依然不幸的是这样只是兼容Firefox的,而WebKit内核的Chrome和Safari同样是无效的,而且兼容Firefox的前提还是需要用户到about:config中手动修改默认安全设置,这个方法是不可取的,除了安全性问题外,用户体验极差!

最终找到的方案是:使用JavaScript配合flash实现.

实现方式:
通过JavaScript动态为使用”剪切板”功能的按钮或其他元素添加并覆盖一层透明的flash,当用户点击时把相应的内容复制到剪切板中,从而实现跨浏览器应用.
优点:
  1. 现在的浏览器都支持flash,它为我们省去了跨浏览器兼容性问题
  2. 在目前浏览器对JavaScript限制越来越严格的现状中,浏览器对action script的限制相对宽松(本文就剪切板操作而言),这也是我们可以利用的地方.
  3. 有现成的开源项目可以使用并做了很好的封装,使用非常容易.
缺点:
  1. 需要额外的加载flash资源和使用更多的JavaScript代码.
  2. 这个不算缺点,但很现实!在开发者没有上述开源项目资源,又对action script不熟悉的情况下,需要一定的学习和开发成本.
使用时需要注意什么?
  1. 由于flash是通过JavaScript动态加载进来的,因此使用Demo需要服务器环境.
  2. 除非将该项目的JavaScript文件和swf文件放置在页面所在目录,否则即使该JavaScript文件和swf文件在同一文件夹下,也同样需要在初始化时通过ZeroClipboard.setMoviePath( ‘某文件夹/ZeroClipboard.swf’ );来指定flash路径,该JavaScript使用的是相对页面路径来加载flash,由于一开始没注意到这点,让我困惑了很久.

下面是我写的初始化代码(已过期),提供参考,更多的使用方式请参考后面给出的项目地址所给出的内容.

该开源项目地址:https://github.com/zeroclipboard/zeroclipboard
项目DEMO:http://zeroclipboard.org/

如需转载,请注明出处:https://i.wanz.im/2010/02/08/javascript_cross_browser_clipboard_operation/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.