Firefox中如何持久化window.open()创建的命名窗口/标签页对象？

首先明确：localStorage无法直接存储window对象——因为它只能序列化存储字符串类型数据，而浏览器的window对象包含循环引用、DOM节点等不可序列化的内容，根本没法存进去。我们需要换个思路，利用窗口名称来复用和重新获取窗口引用，而非直接存储对象本身。

核心实现思路 #

浏览器的window.open("", "窗口名称")方法有个特性：如果同名的窗口已经存在，调用该方法会返回已打开窗口的引用；如果窗口已被关闭，则会创建一个新的空白窗口（你也可以指定默认加载的URL）。我们只需要把窗口名称存在localStorage中，页面刷新后取出名称，重新获取窗口引用即可。

示例代码实现 #

// 存储窗口名称到localStorage
const WINDOW_NAME_KEY = "solr_search_window_name";
const targetWindowName = "my_tab";
localStorage.setItem(WINDOW_NAME_KEY, targetWindowName);

// 获取或创建窗口的通用方法
function getOrCreateWindow() {
  const windowName = localStorage.getItem(WINDOW_NAME_KEY);
  let targetWindow = window.open("", windowName);
  
  // 检查窗口是否被关闭，若关闭则重新打开（带默认URL）
  if (targetWindow.closed) {
    targetWindow = window.open("https://example.com", windowName);
  }
  
  // 确保窗口获得焦点
  targetWindow.focus();
  return targetWindow;
}

// 使用示例：先打开搜索页面，加载完成后跳转查询URL
function executeSolrQuery(queryUrl) {
  const myWindow = getOrCreateWindow();
  
  // 监听窗口加载完成事件，再跳转查询URL
  myWindow.addEventListener('load', function loadHandler() {
    myWindow.removeEventListener('load', loadHandler); // 避免重复触发
    myWindow.location.href = queryUrl;
  });
  
  // 如果窗口已经加载完成（比如之前打开过），直接跳转
  if (myWindow.document.readyState === "complete") {
    myWindow.location.href = queryUrl;
  }
}

关键注意事项 #

• 避免链式调用window.open().focus()：正如你发现的，这种写法可能导致浏览器丢失窗口对象引用，分开调用window.open和focus更可靠。
• 跨域限制：如果你的文档页面和Solr搜索页面跨域，Firefox会限制你对窗口对象的部分访问（比如无法读取closed状态）。这种情况下，你可以尝试直接重新打开窗口，或者通过其他方式（比如postMessage）进行通信。
• 窗口手动关闭的处理：每次获取窗口引用后，务必检查closed属性，如果窗口已被用户关闭，需要重新创建。

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