如何阻止WhatsApp Web在已有打开标签页时新开标签页？

要实现已有WhatsApp Web标签页时不再打开新标签，核心是复用同一个窗口实例，具体修改如下：

实现思路 #

• 用变量跟踪已打开的WhatsApp窗口引用
• 调用window.open时使用固定窗口名称替代_blank，让浏览器复用已有窗口
• 检查窗口状态：如果窗口未关闭则聚焦并更新URL，否则新建窗口

修改后的代码 #

// 保存WhatsApp窗口的全局引用（Vue等组件环境可存在实例属性中，比如this.whatsappWindow）
let whatsappWindow = null;

// 封装打开WhatsApp的逻辑
function openWhatsAppReceipt() {
  const msg = `*Greetings From ${this.previewData.unit_name} ${this.previewData.unit_location}* `;
  const full = `${msg}\nPlease click the link below to get your receipt. \n ${url}`;
  // 修正原URL中的错误（去掉多余的冒号）
  const whatsappUrl = "https://web.whatsapp.com/send?text=" + encodeURIComponent(full);

  // 检查窗口是否存在且未被关闭
  if (whatsappWindow && !whatsappWindow.closed) {
    // 聚焦到已有窗口
    whatsappWindow.focus();
    // 更新窗口的发送链接
    whatsappWindow.location.href = whatsappUrl;
  } else {
    // 新建窗口，使用固定名称确保复用
    whatsappWindow = window.open(whatsappUrl, 'whatsappWindow');
  }
}

关键说明 #

1. 固定窗口名称：window.open的第二个参数用'whatsappWindow'，浏览器会优先复用同名的已打开窗口，而非创建新标签
2. 窗口状态检查：通过whatsappWindow.closed判断用户是否手动关闭了窗口，避免操作已关闭的窗口实例报错
3. 修正URL错误：原代码中https://web.whatsapp.com:/send多了一个冒号，会导致链接无效，需去掉

注意：如果在Vue、React等框架中使用，建议将窗口引用绑定到组件实例上（比如this.whatsappWindow），避免全局变量污染；首次打开时需确保用户已允许站点弹出窗口，否则会被浏览器拦截。

内容的提问来源于stack exchange，提问作者Vishnu .T.D