如何复用已打开的web.whatsapp.com标签页发送分享内容？

同源策略限制说明 #

首先得明确：浏览器的同源策略会阻止你直接访问或操作不同源的标签页内容，web.whatsapp.com和你的网站不属于同一域名，所以没办法直接往已打开的WhatsApp标签页里追加消息。不过可以通过复用窗口引用的方式，避免重复打开新标签页，同时尽量减少对已有会话的干扰。

具体实现方案 #

1. 复用窗口引用，避免重复新建 #

不要用默认的target="_blank"，而是用JS维护一个全局的窗口引用，每次用户点击分享按钮时，先检查这个窗口是否还存在：

// 全局保存WhatsApp窗口的引用
let waShareWindow = null;

document.getElementById('wa4').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止链接默认跳转行为
  const shareLink = this.querySelector('a').href;

  // 检查窗口是否存在且未被关闭
  if (waShareWindow && !waShareWindow.closed) {
    waShareWindow.focus(); // 聚焦到已打开的WhatsApp窗口
    // 更新窗口URL，触发WhatsApp加载新的分享文本
    waShareWindow.location.href = shareLink;
  } else {
    // 窗口不存在则新建，同时保存引用
    waShareWindow = window.open(shareLink, 'whatsapp_web_share', 'width=620,height=720');
  }
});

对应的HTML可以保留原有结构，去掉target="_blank"也可以（因为JS会阻止默认跳转）：

<li id="wa4" class="wa"><a href="https://web.whatsapp.com/send?text=user-generated-text">Whatsapp (web)</a></li>

2. 关于"追加消息"的补充 #

受限于同源策略，你没办法直接往已打开的WhatsApp输入框里追加文本。上面的方案中，更新URL会让WhatsApp重新打开发送界面，文本框会自动填充新的text参数内容，用户可以手动选择合并消息或者发送新内容，这是目前能做到的最接近"追加"的效果。

3. 注意要点 #

• 这个方案依赖于用户没有手动关闭之前打开的WhatsApp窗口，如果窗口被关闭，会自动新建一个。
• 浏览器的弹窗拦截机制可能会阻止首次创建窗口，但因为代码是在用户主动点击事件中触发的，大部分浏览器都会允许。
• 复用窗口不会丢失WhatsApp的登录状态，同一浏览器内的会话会被保留。

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