【问题标题】:Javascript code for "Copy to Clipboard" won't work in Internet Explorer 11“复制到剪贴板”的 Javascript 代码在 Internet Explorer 11 中不起作用
【发布时间】:2019-05-10 15:08:13
【问题描述】:

我有一段 Javascript 代码当前调用特定网页,返回数据,然后将其复制到剪贴板。它在 Chrome、Safari 和 Firefox 中运行,但由于某种原因,复制功能在 IE 11 中无法运行。

响应正文正在返回正确的数据,但我似乎无法将该数据获取到剪贴板。代码必须是纯 Javascript,因为它是通过具有一些限制/限制的开发人员门户使用的。本质上,我想避免导入 jQuery 库/使用 jQuery

function httpGet(theUrl)
{
   if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
   }
   else
   {// code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=function()
   {
       if (xmlhttp.readyState==4 && xmlhttp.status==200)
       {
           function listener(e) {
             e.clipboardData.setData("text/html", xmlhttp.responseText);
             e.clipboardData.setData("text/plain", xmlhttp.responseText);
             e.preventDefault();
           }
           document.addEventListener("copy", listener);
           document.execCommand("copy");
           document.removeEventListener("copy", listener);

           return xmlhttp.responseText;
       }
   }
   xmlhttp.open("GET", theUrl, false );
   xmlhttp.send();
}

该函数在“onclick”HTML 事件中被调用,该事件根据我的理解正常触发(考虑到正在调用“theUrl”页面并返回数据)。任何关于剪贴板为什么没有获取数据的输入将不胜感激。谢谢!

【问题讨论】:

  • 代码必须是纯 Javascript,因为它是通过开发人员门户使用的,但有一些限制/限制。本质上,我想避免导入 jQuery 库/使用 jQuery。据我了解,这利用了一个 jQuery 库。
  • 如果你通读代码,实际剪贴板的东西只是纯 JS。

标签: javascript dom internet-explorer-11


【解决方案1】:

在IE浏览器中,可以使用如下代码:

<script>
    function Copy() {
        if (window.clipboardData) {
            window.clipboardData.clearData();
            window.clipboardData.setData("Text", document.getElementById('txtacpy').value);
        }
        else {
            alert("not support window.cliboardData")
        }
    }
    function paste() {
        if (window.clipboardData) {
            document.getElementById('txtapaste').value = window.clipboardData.getData("Text");
        }
    }
</script>
<input type="button" id="btncopy" value="Copy" onclick="Copy()" />
<br />
<input type="text" name="txtacpy" id="txtacpy" />
<br />
<input type="button" id="btncopy" value="Paste" onclick="paste();" />
<br />
<input type="text" name="txtapaste" id="txtapaste" />

this 这样的结果。

注意:以上代码只适用于IE浏览器,所以可能需要先检查浏览器是否为IE浏览器,请检查this threadthis thread

【讨论】:

    【解决方案2】:

    如果不是 IE11 你可以使用ClipboardAPI,那么我就使用:

    function copy() {
      const copyText = document.querySelector("#input");
      copyText.select();
      document.execCommand("copy");
    }
    
    document.querySelector("#copy").addEventListener("click", copy);
    

    希望对你有帮助!

    【讨论】:

    • 感谢您的回复,但不幸的是我需要 IE11 兼容性。
    • 如上所述,document.exectCommand() 的解决方案适用于 IE11,或者至少应该适用。它没有实现ClipboardAPI
    • 试试这个stackoverflow.com/a/57374062/8814510适用于所有浏览器,IOS和Andriod。还涵盖了用户拒绝剪贴板权限的场景。此外,即使用户手动复制,也会显示“链接已复制”消息。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-06-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多