javascript - 不添加协议(protocol) https 就无法将 URL 复制到剪贴板

Question

我在使用 ASP.NET 和 Javascript 方面相当陌生。最近我遇到了这个问题，我必须在 javascript 按钮操作上复制 URL 并粘贴到新选项卡上才能访问该网站。它确实可以在本地工作，但不能在实时服务器上工作。我发现这是因为没有添加“https”。有什么方法可以在不使用像“http”这样的“https”的情况下工作吗？

function CopyTextFunction() {
  const params = new URLSearchParams(window.location.search);
  params.get('ID')
  var copyText = "https://randomshop.net/OnlineShop/ShopProducts?ID=" + params.get('ID');
  console.log(copyText);
  navigator.clipboard
    .writeText(copyText)
    .then(() => {
      alert("successfully copied");
    })
    .catch(() => {
      alert("something went wrong");
    });
}

Answer 1

正如您正确指出的那样，这是由于未使用 HTTPS。根据 MDN Clipboard文档:“此功能仅在 secure contexts 中可用”。最好的选择是只使用 HTTPS。

---

但由于您要求解决方法，这里有一个(hacky)工作示例。它使用 Document.exec命令，将来会弃用，取而代之的是 ClipboardAPI .

function unsecuredCopyToClipboard(text) {
  const textArea = document.createElement("textarea");
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();
  try {
    document.execCommand('copy');
  } catch (err) {
    console.error('Unable to copy to clipboard', err);
  }
  document.body.removeChild(textArea);
}

然后您可以使用 navigator.clipboard == undefined 来使用回退方法，否则使用支持的普通 navigator.clipboard.writeText(...) 函数.

例如，从您上面的代码:

const copyText = `https://randomshop.net/OnlineShop/ShopProducts?ID=${params.get('ID')}`;

if (navigator.clipboard) { // If normal copy method available, use it
  navigator.clipboard.writeText(copyText);
} else { // Otherwise fallback to the above function
  unsecuredCopyToClipboard(copyText);
}