谷歌浏览器 怎么用js复制东西到剪贴板

Posted 2023-04-22

代码如下：
JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器

function copyToClipboard(txt)
if(window.clipboardData)

window.clipboardData.clearData();
window.clipboardData.setData("Text",txt);
alert("网址复制成功!快用Ctrl+V粘贴到QQ，MSN中发送给好友吧！")

else if(navigator.userAgent.indexOf("Opera") != -1)

window.location = txt;
alert("网址复制成功!快用Ctrl+V粘贴到QQ，MSN中发送给好友吧！")

else if (window.netscape)

try
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");

catch (e)

alert("被浏览器拒绝！\\n请在浏览器地址栏输入\'about:config\'并回车\\n然后将\'signed.applets.codebase_principal_support\'设置为\'true\'");

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);
alert("网址复制成功!快用Ctrl+V粘贴到QQ，MSN中发送给好友吧！")



copyToClipboard(\'ABCD\')

这些代码都是一样的，不存在原创与复制 参考技术A 为了用户安全，chrome直接用js是访问不了电脑的剪贴板的，只能通过flash复制

JS--微信浏览器复制到剪贴板实现

由于太忙很久没写博客了，如有错误遗漏，请指出，感谢！

首先这里要注意，是微信浏览器下的解决方案，其他浏览器请自行测试。

先说复制到剪贴板主要有什么使用场景：

• 优惠券优惠码，需要用户复制
• 淘宝商品，需要复制淘口令

由于淘宝链接无法在微信中打开，所以淘宝开发了淘口令方便物质传播，而导购网站在微信推广的时候也是生成口令，用户只需要复制口令，打开手机淘宝，即可看到对应的商品：

 

这里要使用的是一个非常强大的工具Clipboardjs，这个工具只需要引入对应的js，即可方便的完成上面的功能。

引入js，这里我把js放在了服务器，通过url请求访问即可，官网方法是下载对应的js文件。

页面代码：

<div class="test-area">
    <input id="taokouling" value="{{code}}" type="text">
    <button id="copyCode" class="btn" data-clipboard-target="#taokouling" data-clipboard-action="copy">
        复制淘口令
    </button>
    <script type="text/javascript" src="http://www.fndroid.cn/clipboard.min.js"></script>
    <script>
        var clipboard = new Clipboard(\'.btn\');
        clipboard.on(\'success\', function(e){
            console.log(e);
            document.getElementById(\'copyCode\').innerHTML = \'复制成功\';
        });
        clipboard.on(\'error\', function(e){
            document.getElementById(\'copyCode\').innerHTML = \'复制失败，请长按复制\';
        });
    </script>
</div>

虽然这个代码很简单，但是却能兼容当前版本的iOS和Android微信浏览器，查了很多的代码才发现这个，所以记录一下，后面的人如果需求一样就不用走弯路了。