在IE中,JS可以直接访问剪贴板,但是firefox,chrome等其它"高级"浏览器,就没这么幸运了。网上流传的所谓兼容firefox/IE的剪贴板访问javascript代码,都是N年前的往事了。
根据http://mozilla.com.cn/post/49413/ 上的说法:
----------------------------------
火狐不允许网页操作用户的剪切板,因为有安全问题,网页可能盗用你复制的密码等等。
以前可以通过修改设置提权,允许网页获得高权限,操作剪切板,目前火狐已经取消了这个接口。不再允许,所以修改了设置也无效,目前还是自己通过快捷键复制吧。
----------------------------------
看来通过"纯js"来达到“一统天下”,至少在剪贴板这一问题上,已经是不可能了.
幸好,我们还有Flash/Silverlight这一类插件可以解决这一问题。Flash和Silverlight都内置了剪贴板的访问接口,zClip就是利用flash来解决这一问题的免费项目:
http://www.steamdev.com/zclip/
其原理是在目标元素上叠加一个透明的flash,点击目标元素时,其实就是把flash激活了,然后通过flash内部的剪贴板访问接口实现 复制到剪贴板 功能.
整个flash 1K + js 7K,一共约8K大小,已经能圆满解决该问题。
但是事情并没有就此止步,如果你还想进一步减少附加文件的大小,或者检验"自己动手,丰衣足食"的乐趣,下面给出了Silverlight的解决方案:
一、创建一个新Silverliight项目,里面就放一个MainPage,然后在MainPage.xaml.cs里,把对剪贴板的读写方法暴露出来
using System; using System.Windows; using System.Windows.Browser; using System.Windows.Controls; namespace ClipboardTools { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); } /// <summary> /// 设置剪贴板文本 /// </summary> /// <param name="text"></param> /// <returns></returns> [ScriptableMember()] public bool SetText(string text) { try { Clipboard.SetText(text); return true; } catch (Exception e) { System.Diagnostics.Debug.WriteLine(e.Message); return false; } } /// <summary> /// 获取剪贴板文本 /// </summary> /// <returns></returns> [ScriptableMember()] public string GetText() { try { return Clipboard.GetText(); } catch (Exception e) { System.Diagnostics.Debug.WriteLine(e.Message); return ""; } } /// <summary> /// 测试剪贴板里是否有内容 /// </summary> /// <returns></returns> [ScriptableMember()] public bool ContainsText() { return Clipboard.ContainsText(); } } }
然后在App.xaml.cs里注册一下:
private void Application_Startup(object sender, StartupEventArgs e) { MainPage mp = new MainPage(); this.RootVisual = mp; HtmlPage.RegisterScriptableObject("JsHandler", mp); }
如果是Silverlight5,注册把下面这个选项勾上,以允许一些需要高权限的操作在浏览器中运行
二、web页面上使用代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Clipboard</title> <style type="text/css"> html, body { height: 100%; overflow: auto;margin: 0;padding:0 } #silverlightControlHost { height: 0px;width: 0px; } button{ width: 75px;margin-left:5px} </style> </head> <body> <div id="silverlightControlHost"> <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="ClientBin/Clipboard.xap" /> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="5.0.61118.0" /> <param name="onLoad" value="SilverlightLoaded" /> <param name="autoUpgrade" value="false" /> </object> </div> <script type="text/javascript"> var slCtl = null; function SilverlightLoaded(sender) { slCtl = sender.getHost(); } function setText(text) { if (slCtl != null) { var s = slCtl.Content.JsHandler.SetText(text); if (s) { alert(text + "\n\n已复制到剪贴板!"); return true; } else { alert("复制到剪贴板失败!"); return true; } } alert("Silverlight加载失败!"); return false; } function getText() { if (slCtl != null) { return slCtl.Content.JsHandler.GetText(); } return ""; } </script> <div style="margin:10px"> <input type="text" id="txtSrc" value="Sample Text"/> <button id="btnCopy" onclick="setText(document.getElementById('txtSrc').value)">copy</button> <button id="btnSet" onclick="alert(getText())">get</button> </div> </body> </html>
silverlight编译后的xap约4K,js代码不足1K,一共5k左右