跨域多客户端调用AppOne时，如何实现单浏览器窗口常驻？

问题背景 #

多个不同域名的客户端通过window.open("", "application-one")调用AppOne时，由于跨域限制，每个客户端都会打开新的同名窗口；但同一客户端多次调用只会复用已有窗口。需求是无论哪个客户端发起调用，始终只保留一个AppOne窗口，且所有逻辑需在AppOne端实现，不修改客户端代码。

解决方案思路 #

利用浏览器localStorage（跨窗口共享）和sessionStorage（窗口级独立）的特性，结合窗口生命周期事件实现单窗口管控：

• 用localStorage记录当前活跃的AppOne窗口唯一标识
• 用sessionStorage存储当前窗口的专属ID
• 窗口加载时校验活跃标识，重复窗口自动关闭并唤起已有窗口
• 窗口关闭时清除活跃标识，确保下次调用能正常创建新窗口

具体实现代码 #

在AppOne的页面中添加以下JavaScript代码：

// 生成当前窗口的唯一标识
const currentWindowId = `app-one-window-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
sessionStorage.setItem('appOneWindowId', currentWindowId);

// 检查并设置活跃窗口
function checkActiveWindow() {
  const activeWindowId = localStorage.getItem('activeAppOneWindow');
  
  if (!activeWindowId) {
    // 无活跃窗口，标记当前窗口为活跃状态
    localStorage.setItem('activeAppOneWindow', currentWindowId);
    // 监听窗口关闭事件，清除活跃标记
    window.addEventListener('beforeunload', () => {
      if (localStorage.getItem('activeAppOneWindow') === currentWindowId) {
        localStorage.removeItem('activeAppOneWindow');
      }
    });
  } else if (activeWindowId !== currentWindowId) {
    // 已有活跃窗口，当前窗口自动关闭
    window.close();
    // 触发活跃窗口刷新并聚焦
    localStorage.setItem('triggerAppOneRefresh', Date.now().toString());
  }
}

// 监听storage事件，处理刷新和聚焦逻辑
window.addEventListener('storage', (e) => {
  if (e.key === 'triggerAppOneRefresh' && localStorage.getItem('activeAppOneWindow') === currentWindowId) {
    // 刷新当前页面
    window.location.reload();
    // 聚焦窗口
    window.focus();
    // 清除触发标记
    localStorage.removeItem('triggerAppOneRefresh');
  }
});

// 页面加载完成后执行校验
window.addEventListener('load', checkActiveWindow);

关键说明 #

• 跨窗口通信：通过localStorage的storage事件实现不同AppOne窗口间的通知，确保活跃窗口能响应新的调用请求
• 窗口唯一性：每个窗口生成专属唯一ID，避免同窗口刷新时被误判为重复实例
• 生命周期管理：监听beforeunload事件，在窗口关闭时清除活跃标记，保证下次调用能正常创建新窗口

内容的提问来源于stack exchange，提问作者Siddhaveeraiah T M