Javascript 将当前URL复制到剪贴板

不知道为什么这对我今天来说如此困难，但由于某种原因，我似乎无法让它将当前URL复制到剪贴板。总的来说，我正在寻找一种不需要创建一些隐藏文本元素的方法

这就是我目前正在尝试的：

var shareBtn = document.querySelector(".share-button");

shareBtn.addEventListener('click', function(event) {
  var cpLink = window.location.href;
  cpLink.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
  event.preventDefault;
});

当我尝试使用。选择进行此操作时，我会出现以下错误： t、 选择不是一个函数 所以我不能百分之百确定最好的方法是什么。同样，不使用jQuery或任何其他JS库，也不使用某种隐藏的文本字段。

您可以创建一个临时DOM元素来保存URL 不幸的是，没有用于剪贴板操作的标准API，因此我们只剩下使用HTML输入元素来满足需要的黑客方法。其思想是创建一个输入，将其值设置为当前文档的URL，选择其内容并执行复制

然后，我们清理混乱，而不是将输入设置为隐藏并污染DOM

var dummy = document.createElement('input'),
    text = window.location.href;

document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand('copy');
document.body.removeChild(dummy);

这确实是浏览器处理复制时所需的全部，而不涉及任何剪贴板事件的自定义处理

但是如果您或某个库钩住复制事件，比如window.addEventListener'copy'。。。若这个处理程序依赖于使用window.getSelection，那个么Firefox的问题就会困扰你们。比如：

值得注意的是，当前getSelection不适用于Firefox、Edge Legacy和Internet Explorer中的内容和元素

因此，getSelection在HTMLInputElementselect之后返回一个非空结果，但不提供实际选择的内容。通过使用非输入元素临时保存URL，可以轻松修复：

函数copyUrl{ if！window.getSelection{ 警告“请从位置栏复制URL”； 回来 } const dummy=document.createElement'p'； dummy.textContent=window.location.href； document.body.appendChilddummy； 常量范围=document.createRange； range.setStartForeDummy； range.setEndAfterdummy； const selection=window.getSelection； //首先清除，以防用户已选择其他文本 selection.removeAllRanges； selection.addRange范围； document.execCommand'copy'； document.body.removeChilddummy； }

---

当没有自定义处理程序钩住复制事件时，上述方法也会起作用。

2021更新：您可以使用类似的方法：

navigator.clipboard.writeTextwindow.location.href；

---

因为它不是一个元素，你不能选择文本。如果没有一个支持选择方法的虚拟元素，你就无法真正做到这一点。在浏览器拥有自己的支付集成API，但缺少剪贴板API这样的基本元素的一年里，这一点让我感到惊讶。那么，抓取当前URL并将其放入剪贴板的最佳方式是什么呢？啊，明白了。唯一的选择是创建一个空对象，然后删除它，这有点傻。但如果那是唯一的办法…那就这样吧。是的，这很痛苦。我一直在寻找选择API，也许可以找到一种方法来模拟整个过程，而不使用输入，但到目前为止没有运气。哇，那么你只能在文本输入上使用execComand？哇，我想说的是，这种方法至少在Chrome上不起作用，或者至少在我使用modal的情况下不起作用。作为一种解决方法，可以预先创建一个隐藏字段，然后取消隐藏+更改值+复制+再次隐藏：详细信息->这应该是可以接受的答案。。。这可能是一个黑客，但它的工作非常好