如何在React中复制网站当前URL？

一、前端网页场景（最常用） #

以下是几种无需依赖第三方库的原生实现方式，适配大多数现代浏览器，同时提供旧浏览器兼容方案。

1. 复制当前页面URL（推荐现代浏览器使用）

利用浏览器原生的Clipboard API，操作简洁且安全：

function copyCurrentShareUrl() {
  const currentUrl = window.location.href;
  navigator.clipboard.writeText(currentUrl)
    .then(() => {
      alert('分享链接已复制到剪贴板');
    })
    .catch(err => {
      console.error('复制失败:', err);
      alert('复制出错，请手动复制链接');
    });
}

搭配HTML按钮直接调用：

<button onclick="copyCurrentShareUrl()">复制分享链接</button>

2. 兼容旧浏览器的降级方案

针对不支持Clipboard API的旧浏览器，可通过创建临时输入框完成复制：

function copyUrlFallback() {
  const currentUrl = window.location.href;
  const tempInput = document.createElement('input');
  tempInput.style.position = 'absolute';
  tempInput.style.opacity = '0';
  tempInput.value = currentUrl;
  document.body.appendChild(tempInput);
  tempInput.select();
  document.execCommand('copy');
  document.body.removeChild(tempInput);
  alert('分享链接已复制到剪贴板');
}

3. 自动兼容的混合方案

优先使用Clipboard API，失败则自动切换到降级方案，覆盖更多场景：

function copyShareUrl() {
  const currentUrl = window.location.href;
  if (navigator.clipboard) {
    navigator.clipboard.writeText(currentUrl)
      .then(() => alert('链接已复制'))
      .catch(() => copyUrlFallback());
  } else {
    copyUrlFallback();
  }
}

4. 复制自定义分享链接

如果需要复制的不是当前页面URL，而是指定的自定义链接，只需替换URL字符串即可：

function copyCustomShareUrl() {
  const customUrl = 'https://your-site.com/custom-share-path';
  navigator.clipboard.writeText(customUrl)
    .then(() => alert('自定义分享链接已复制'))
    .catch(err => console.error('复制失败:', err));
}

二、注意事项 #

• 部分浏览器要求复制操作必须由用户主动触发（比如点击按钮），不能通过页面加载自动执行，否则会被浏览器的安全策略拦截。
• 若在HTTPS环境外使用，Clipboard API可能无法正常工作，此时降级方案会更可靠。

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