首先是纯JS的实现方式,主要有两种方式:
方式一:网络上基本都能搜到这一段代码:
var copy2Clipboard = function (txt) {
if (window.clipboardData) {
window.clipboardData.clearData();
window.clipboardData.setData("Text", txt);
}
else if (navigator.userAgent.indexOf("Opera") != -1) {
window.location = txt;
}
else if (window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}
catch (e) {
alert("您的firefox安全限制限制您进行剪贴板操作,请打开’about:config’将signed.applets.codebase_principal_support’设置为'true’之后重试,相对路径为firefox根目录/greprefs/all.js");
return false;
}
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 = txt; 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);
}
}
很多文章都是复制粘贴的,没有测试过,就说可以兼容FF。
很可惜的是,这段代码只能在IE使用。所以不可取。
方式二:虽然用纯js是无法实现兼容所有浏览器,但也可以用 prompt对话框来取巧。
function copy2Clipboard(txt) {
if (window.clipboardData) {
window.clipboardData.clearData();
window.clipboardData.setData("Text", txt);
}
else{
prompt('你使用的是非IE核心浏览器,请按下 Ctrl+C 复制代码到剪贴板', txt);
}
}
给用户友好的提示,比上一种方式更好一些。
JS的复制功能无法很好的实现浏览器兼容,但用js+flash方式就可以实现
最常见到的就是使用:Zero Clipboard
实现原理:用一个透明的 Flash ,让其漂浮在按钮之上[引用js包,会自动定位],这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了。
如何使用 Zero Clipboard
1、首先下载 Zero Clipboard。其中需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf ,将这两个文件放到项目中。
2、在web环境中测试即可(注意:测试过程中,因本地flash安全性问题是无法运行的。)
附上官网地址:http://www.steamdev.com/zclip/
具体代码:
1、引入js
<script src="/Scripts/extend/ZeroClipboard.min.js" type="text/javascript"></script>
2、页面调用
<a id="copyLink" data-clipboard-text="http://www.baidu.com" href="javascript:void(0);">复制链接</a>
<script type="text/javascript">
$(function () {
var clip = new ZeroClipboard(document.getElementById("copyLink"), {
moviePath: "/Scripts/extend/ZeroClipboard.swf"
});
clip.on('complete', function (client, args) {
ZENG.msgbox.show("复制成功!", 4, 2000); //使用alert提示框,在ff下,会卡住几秒
});
});
</script>
这里有一点需要注意的是,在火狐下 alert提示框 可能和 Flash有冲突,造成浏览器假死,要过好几秒才会有反应,所以我用了自定义的弹层。
当然,这一bug或许会在将来的某个版本里修正。
Zero Clipboard本身还在更新中,在更新期间有一次版本的升级,使调用的方法完全不一样。所以具体如何调用代码,还是参照官网为准!