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

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

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

JavaScript

1window.clipboardData.setData(‘text’, sometext);

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

JavaScript

netscape.security.PrivilegeManager.enablePrivilege(‘UniversalXPConnect’);var clip = Components.classes[‘@mozilla.org/widget/clipboard;1’] .createInstance(Components.interfaces.nsIClipboard);if (!clip) return;var trans = Components.classes[‘@mozilla.org/widget/transferable;1’]   .createInstance(Components.interfaces.nsITransferable);if (!trans) return;trans.addDataFlavor(‘text/unicode’);var str = new Object();var len = new Object();var str = Components.classes[« @mozilla.org/supports-string;1 »] .createInstance(Components.interfaces.nsISupportsString);var copytext=meintext;str.data=copytext;trans.setTransferData(« text/unicode »,str,copytext.length*2);var clipid=Components.interfaces.nsIClipboard;if (!clip) return false;clip.setData(trans,null,clipid.kGlobalClipboard);}} catch (e) {alert(‘因为安全策略的原因,此项功能已被您的浏览器禁止。关闭此窗口,然后按下“Ctrl+C”组合键完成复制。’); codeobj.focus();}codeobj.select();

依然不幸的是这样只是兼容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,由于一开始没注意到这点,让我困惑了很久.

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

JavaScript

123456789101112function clipboardini(copyobj){ ZeroClipboard.setMoviePath( ‘scripts/ZeroClipboard.swf’ ); clip = new ZeroClipboard.Client(); clip.setHandCursor( true ); clip.addEventListener(‘mousedown’, copycode); clip.addEventListener(‘complete’, function(){popup(‘popup’,’URL已经复制到剪切板了,赶快去分享吧!’);}); clip.glue( copyobj );}function copycode(){ clip.setText( ‘http://code.wanz.im/?’+document.getElementsByTagName(’em’)[0].innerHTML );}

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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.