将当前URL复制到剪贴板

Question

不知道为什么今天对我这么困难,但由于某种原因我似乎无法将当前的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;
});

当我尝试使用它时,.select()我得到了这个错误: t.select is not a function 所以我不是100%确定最好的方法是什么.再次,不使用jQuery(或任何其他JS库)而不使用某种隐藏的文本字段.

Answer 1

您可以创建一个临时DOM元素来保存URL

不幸的是,剪贴板操作没有标准的API,所以我们留下了使用HTML input元素来满足我们需求的hacky方式.我们的想法是创建一个输入,将其值设置为当前文档的URL,选择其内容并执行copy.

然后我们清理混乱,而不是将输入设置为隐藏和污染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);

Answer 2

2021 年更新：您可以像这样使用剪贴板 API：

navigator.clipboard.writeText(window.location.href);

Answer 3

这可能是更简单的方法之一

window.navigator.clipboard.writeText(textToCopy);