求助：无需创建隐藏文本元素复制当前URL到剪贴板的方法

嘿，我懂你的困扰——想不用创建隐藏文本元素就把当前页面URL复制到剪贴板，之前的代码里直接对window.location.href调用select()肯定行不通，因为它只是个字符串，不是可选中的DOM元素呀！

为什么你的原有代码会失败 #

你原来的代码里，cpLink = window.location.href得到的是字符串类型，而select()方法只能用于<input>、<textarea>这类表单元素，所以调用cpLink.select()会直接报错，这就是问题所在。

现代解决方案：使用Clipboard API #

现在浏览器都支持更现代、更简洁的Clipboard API，完全不需要创建任何额外元素就能实现复制，代码如下：

const shareBtn = document.querySelector(".share-button");
shareBtn.addEventListener('click', async function(event) {
  try {
    // 直接将当前URL写入剪贴板
    await navigator.clipboard.writeText(window.location.href);
    alert('URL已成功复制到剪贴板！'); // 或者自定义提示逻辑
  } catch (err) {
    console.error('复制操作失败:', err);
    // 这里可以添加降级处理，比如提示用户手动复制
  }
});

这个方案的优势 #

• 无需创建任何隐藏DOM元素，代码更简洁
• 基于异步API，不会阻塞主线程
• 相比旧的document.execCommand('copy')，兼容性和可靠性更好

注意事项 #

• Clipboard API需要在安全上下文下运行：也就是HTTPS协议，本地开发的localhost是例外，也能正常使用
• 如果要兼容非常老旧的浏览器（比如IE），那可能还是需要用创建隐藏元素的降级方案，但现在大部分场景下现代API足够覆盖需求

内容的提问来源于stack exchange，提问作者ultraloveninja