如何将URL（链接）复制到剪贴板？附前端实现代码示例

嘿，我来帮你搞定这个URL复制到剪贴板的需求～首先得说下你提供的那段代码有几个小问题：比如elem.value = google.com里的URL没加引号会触发语法错误，而且document.execCommand("copy")已经是被废弃的API了，现在更推荐用更现代、更可靠的方案。

下面给你两种实用的实现方案，按需选择：

方案一：使用现代Clipboard API（推荐） #

这个API是当前浏览器的标准方案，代码更简洁，稳定性也更高：

function copyURL() {
  // 替换成你需要复制的目标URL
  const targetURL = "https://google.com";
  
  navigator.clipboard.writeText(targetURL)
    .then(() => {
      alert("Copied to clipboard!");
    })
    .catch(err => {
      console.error('复制失败:', err);
      alert("复制失败，请手动复制");
    });
}

对应的触发按钮代码：

<a href="javascript:void(0);" onclick="copyURL()">Copy URL</a>

注意事项： #

• Clipboard API需要在HTTPS环境下使用（本地开发的localhost除外）
• 必须由用户主动触发（比如点击事件），浏览器会拦截无交互的自动复制操作

方案二：兼容旧浏览器的textarea降级方案 #

如果需要兼容一些不支持Clipboard API的老浏览器，可以改进你原本的思路，修复问题后使用：

function copyURL() {
  const elem = document.createElement("textarea");
  // 隐藏textarea，避免页面出现突兀的元素或闪烁
  elem.style.position = 'absolute';
  elem.style.left = '-9999px';
  elem.style.top = '-9999px';
  
  document.body.appendChild(elem);
  elem.value = "https://google.com"; // 给URL添加引号，修复语法错误
  elem.select();
  
  try {
    const successful = document.execCommand('copy');
    const msg = successful ? 'Copied to clipboard!' : '复制失败';
    alert(msg);
  } catch (err) {
    console.error('复制出错:', err);
    alert("复制失败，请手动复制");
  }
  
  document.body.removeChild(elem);
}

对应的触发按钮代码和方案一一致：

<a href="javascript:void(0);" onclick="copyURL()">Copy URL</a>

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