复用window.open标签页时如何持续修改子标签全局变量？

我尝试打开新标签页并在其全局上下文（同域、符合CORS安全要求）中定义一个对象，之后复用该标签页（比如刷新）并再次在其全局上下文中声明该对象，但遇到了问题：

首次运行以下代码时，子标签页的window.something能正常定义：

// 父/主标签页中
const newTab = window.open('https://same-domain-url.com', 'knownString');
newTab.something = { dev: true };

但再次执行相同操作时，子标签页会按预期刷新（因为target参数复用了已有窗口），但此时子标签页的window.something变成了undefined。

我已经排除了竞态条件问题——在子页面的DOMContentLoaded事件中，通过setInterval持续打印window.something进行检测。测试环境为Chrome 109.0.5414.87和Firefox 107.0.1（64位），二者表现一致。

补充示例代码 #

页面1（主页面：localhost:8080/page-1）

HTML：

<button id="button">Open Tab</button>

JS：

(function () {
  document.addEventListener("DOMContentLoaded", (_) => {
    document.getElementById("button").addEventListener("click", (_) => {
      let newTab = window.open(
        "localhost:8080/page-2",
        "page2"
      );
      newTab.something = { dev: true };
    });
  });
})();

页面2（子页面/新标签页：localhost:8080/page-2）

JS：

document.addEventListener('DOMContentLoaded', function() {
  setInterval(() => {
    console.log('>>>>>>', JSON.stringify(window.something));
  }, 1000);
});

复现步骤 #

1. 点击页面1的按钮，创建子标签页，子标签页控制台能看到window.something已正确定义。
2. 不关闭子标签页，切回页面1再次点击按钮，子标签页刷新，但控制台显示window.something为undefined。

问题核心是：复用标签页触发刷新时，原页面的全局上下文被销毁，新上下文重新初始化，你直接赋值的newTab.something会随旧上下文消失，新上下文没有被同步赋值。以下是几种可靠的解决方式：

1. URL参数传递数据 #

主页面打开/刷新子页面时，把数据附加到URL查询参数中，子页面加载时读取参数并赋值到全局变量：

主页面修改后代码 #

(function () {
  document.addEventListener("DOMContentLoaded", (_) => {
    document.getElementById("button").addEventListener("click", (_) => {
      const data = encodeURIComponent(JSON.stringify({ dev: true }));
      let newTab = window.open(
        `localhost:8080/page-2?data=${data}`,
        "page2"
      );
    });
  });
})();

子页面修改后代码 #

document.addEventListener('DOMContentLoaded', function() {
  const urlParams = new URLSearchParams(window.location.search);
  const dataStr = urlParams.get('data');
  if (dataStr) {
    window.something = JSON.parse(decodeURIComponent(dataStr));
  }

  setInterval(() => {
    console.log('>>>>>>', JSON.stringify(window.something));
  }, 1000);
});

2. postMessage跨页通信 #

利用同域页面的postMessage API，主页面在确认子页面刷新完成后主动发送数据，子页面接收后赋值：

主页面修改后代码 #

(function () {
  let newTab;
  document.addEventListener("DOMContentLoaded", (_) => {
    document.getElementById("button").addEventListener("click", (_) => {
      newTab = window.open("localhost:8080/page-2", "page2");
      window.addEventListener('message', function(e) {
        if (e.origin === 'http://localhost:8080' && e.data.type === 'loaded') {
          newTab.postMessage({ type: 'setSomething', data: { dev: true } }, 'http://localhost:8080');
        }
      });
    });
  });
})();

子页面修改后代码 #

document.addEventListener('DOMContentLoaded', function() {
  window.opener.postMessage({ type: 'loaded' }, 'http://localhost:8080');

  window.addEventListener('message', function(e) {
    if (e.origin === 'http://localhost:8080' && e.data.type === 'setSomething') {
      window.something = e.data.data;
    }
  });

  setInterval(() => {
    console.log('>>>>>>', JSON.stringify(window.something));
  }, 1000);
});

3. 同域存储（localStorage/sessionStorage） #

将数据存在同域存储中，子页面每次加载时读取并赋值：

主页面修改后代码 #

(function () {
  document.addEventListener("DOMContentLoaded", (_) => {
    document.getElementById("button").addEventListener("click", (_) => {
      localStorage.setItem('something', JSON.stringify({ dev: true }));
      let newTab = window.open("localhost:8080/page-2", "page2");
    });
  });
})();

子页面修改后代码 #

document.addEventListener('DOMContentLoaded', function() {
  const dataStr = localStorage.getItem('something');
  if (dataStr) {
    window.something = JSON.parse(dataStr);
  }

  setInterval(() => {
    console.log('>>>>>>', JSON.stringify(window.something));
  }, 1000);
});

注：若不需要持久化数据，推荐用sessionStorage，它会在标签页关闭时自动清除。

内容的提问来源于stack exchange，提问作者enrique.diaz