JS动态生成分享URL重复追加问题及解决方案探讨

你遇到的这个问题很常见：首次点击分享链接时能正常生成目标URL，但从邮件或Facebook分享页面返回原页面后，再次点击任意分享链接，内容会重复追加到已经修改过的href属性上，导致URL失效。下面聊聊已有的解决方案，以及更灵活的优化思路：

方案1：JS统一管理基础分享URL #

这个方案从根源上避免了重复追加的问题——把所有平台的基础分享URL从HTML标签中剥离，集中在JS里维护，每次点击都基于原始基础URL生成目标地址。

修改后的HTML：

<a onclick="buildURI(this)" class="sharelink" target="_blank" title="Facebook"><img src="facebook32.png" /></a>
<a onclick="buildURI(this)" class="sharelink" target="_blank" title="WhatsApp"><img src="whatsapp24.png"></a>
<a onclick="buildURI(this)" class="sharelink" target="_blank" title="Mail"><img src="envelope.png"></a>

对应的JS代码：

const fbShareUrl = 'https://www.facebook.com/sharer/sharer.php?u=';
const whatsAppShareUrl = 'https://wa.me/?text=';

function buildURI(item) {
  if (item.title === 'Mail') {
    const href = 'mailto:?';
    const subject = 'subject=' + document.getElementById('header').innerText;
    const body = "&body=Check out at this url : " + window.location.href;
    item.setAttribute('href', href + subject + body);
  } else {
    let href;
    if(item.title === 'Facebook'){
      href = fbShareUrl;
    } else if(item.title === 'WhatsApp'){
      href = whatsAppShareUrl;
    }
    item.setAttribute('href', href + window.location.href);
  }
}

优点：所有平台的分享地址都集中管理，后期修改平台链接只需要调整JS变量，不用改动HTML；完全避免了重复追加的问题。

方案2：阻止点击事件重复执行 #

这是一个轻量化的快速修复方案，在原函数末尾添加item.onclick = null，让点击事件只执行一次：

修改后的JS代码：

function buildURI(item) {
  if (item.href == 'mailto:?') {
    subject = 'subject=' + document.getElementById('header').innerText;
    body = "&body=Check out at this url : " + window.location.href;
    item.setAttribute('href', item.href + subject + body);
  } else {
    item.setAttribute('href', item.href + window.location.href);
  }
  // 执行一次后移除点击事件，避免重复追加
  item.onclick = null;
}

潜在风险：

• 如果页面内容更新后需要重新分享，或者用户返回页面后想再次分享，此时点击事件已经被移除，分享链接会完全失效，必须刷新页面才能恢复；
• 对于target="_blank"的链接，用户在新标签页完成分享返回后，原页面的分享链接已经无法再次点击，体验较差。

额外优化思路：直接跳转生成的URL（推荐） #

还有一种更灵活的方案——不修改原href属性，点击时直接生成目标URL并跳转，完全规避DOM属性修改带来的状态残留问题：

function buildURI(item) {
  // 阻止默认跳转行为
  event.preventDefault();
  
  let targetUrl;
  if (item.title === 'Mail') {
    const subject = 'subject=' + document.getElementById('header').innerText;
    const body = "&body=Check out at this url : " + window.location.href;
    targetUrl = 'mailto:?' + subject + body;
  } else if(item.title === 'Facebook'){
    targetUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + window.location.href;
  } else if(item.title === 'WhatsApp'){
    targetUrl = 'https://wa.me/?text=' + window.location.href;
  }
  
  // 在新标签页打开目标URL
  window.open(targetUrl, '_blank');
}

对应的HTML可以保留原href作为JS失效时的降级方案：

<a onclick="buildURI(this)" href="https://www.facebook.com/sharer/sharer.php?u=" class="sharelink" target="_blank" title="Facebook"><img src="facebook32.png" /></a>
<a onclick="buildURI(this)" href="https://wa.me/?text=" class="sharelink" target="_blank" title="WhatsApp"><img src="whatsapp24.png"></a>
<a onclick="buildURI(this)" href="mailto:?" class="sharelink" target="_blank" title="Mail"><img src="envelope.png"></a>

优势：

• 永远基于原始URL生成目标地址，不会有重复追加的问题；
• 原href可作为JS禁用时的 fallback，提升页面兼容性；
• 用户可以多次点击分享链接，每次都会生成正确的URL；
• 不需要修改DOM属性，避免了状态残留的隐患。

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