复制内容到剪贴板,JS以及Flash的实现

首先是纯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本身还在更新中,在更新期间有一次版本的升级,使调用的方法完全不一样。所以具体如何调用代码,还是参照官网为准!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值