支持多浏览器“复制到剪切板”Zero Clipboard方案实现
复制到剪切板,是在客户端常用的功能,使用javascript(window.clipboardData.setData("Text", txt)),简单方便,遗憾的是只有IE浏览器支持。而要想FireFox中使用也是需要较多的javascript,且需要用户自己设置,费力不讨好。使用zeroclipboard插件,简单,方便,几乎支持所有流行的浏览器,且只需要写很少的脚本。
前言,Zero ClipboardZero库使用一种使用无形的Adobe Flash和javascript 接口的方式,拷贝文本到剪切板。"Zero" 意味着这个类库是无形的,并且用户接口也完全在于你的使用。这个类库完全和Flash Player 10兼容,它通过用户点击在flash上的事件来响应拷贝到剪切板的操作。这是通过floating在你所选择的DOM元素上的flash自动实现的。标准的鼠标事件甚至延伸到你的DOM元素,所以你仍然可以滚动和点下鼠标来响应。
第一,引入zeroclipboard.js和zeroclipboard.swf(注意在zeroclipboard.swf需要和使用页面在同一目录)。
第二,在使用页面,初始化时加如下脚本:
$(function() {
ZeroClipboardInit();
});
function ZeroClipboardInit() {
var clip = new ZeroClipboard.Client();
clip.addEventListener('complete', function(client, text) {
alert("已拷贝到剪切板!");
clip.destroy();//当有多个拷贝按钮需要绑定拷贝时,为了让不同时显示的按钮能响应拷贝事件,需要这个方法来移除,如果只有一个按钮则不用这句。
});
clip.setText('what you want to copy to Clipboard');//想要拷贝的内容
clip.glue('BtnExport');//'BtnExport'指某个DOM元素(如:Button)的ID
}
以上代码,能满足大部分需要,如想进一步了解,请参考原文。
第三,支持的浏览器
Browser | Windows XP SP3 | Windows Vista | Mac OS X Leopard |
Internet Exploder | 7.0 | 7.0 | - |
Firefox | 3.0 | 3.0 | 3.0 |
Safari | - | - | 3.0 |
Google Chrome | 1.0 | 1.0 |
Zero ClipboardZero 出处:http://code.google.com/p/zeroclipboard/。