如何让JavaScript调用WhatsApp时复用PC浏览器已打开的标签页？

要解决每次调用window.open都新开标签页的问题，核心是给窗口指定一个固定的名称标识，让浏览器复用已打开的同名窗口/标签页，具体实现如下：

修改后的代码 #

// 固定窗口名称，确保每次调用都指向同一个目标
const targetWindowName = 'whatsapp_share_window';
const shareText = 'Hello, world!';
const shareUrl = `https://wa.me/?text=${encodeURIComponent(shareText)}`;

// 尝试获取或打开指定名称的窗口
let waWindow = window.open('', targetWindowName, 'width=600,height=600');

if (waWindow) {
  // 更新窗口的URL到分享链接
  waWindow.location.href = shareUrl;
  // 将窗口前置到最上层
  waWindow.focus();
}

原理说明 #

• window.open的第二个参数是窗口名称，只要这个名称固定不变，浏览器就会优先复用已打开的同名标签页/窗口，而不是新建。
• 先尝试打开一个空的同名窗口（避免首次调用时直接加载链接被拦截），再通过location.href更新到WhatsApp分享链接，同时调用focus()确保窗口处于可见状态。

注意事项 #

• 必须绑定到用户的主动交互事件（比如按钮点击）触发，否则浏览器的弹窗拦截机制可能会阻止窗口打开/复用。
• 如果用户手动关闭了指定名称的标签页，下次调用时会重新创建新窗口。

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