如何跟踪新开标签页并在其关闭后刷新原页面？

是的，你得调整新标签页的打开方式才行。原来用form的target="_blank"直接提交的话，原页面拿不到新标签页的引用，根本没法监听它什么时候关闭。下面是具体的实现思路和代码：

核心思路 #

通过window.open()手动打开新窗口并保存它的引用，然后把表单提交到这个窗口，之后轮询检查这个窗口是否关闭，一旦关闭就刷新原页面。这种方式能绕开target="_blank"无法跟踪窗口状态的问题。

代码修改示例 #

把你的JS监听代码改成这样：

$('button#add').on('click', function() {
  // 打开空白新窗口，保存引用
  const newTab = window.open('', '_blank');
  
  // 获取表单DOM元素
  const form = document.getElementById('form');
  
  // 让表单提交到刚才打开的新窗口
  form.target = '_blank';
  
  // 提交表单
  form.submit();
  
  // 轮询检查新窗口是否关闭（跨域场景下更兼容）
  const closeChecker = setInterval(() => {
    if (newTab.closed) {
      clearInterval(closeChecker);
      // 刷新原页面
      window.location.reload();
    }
  }, 500); // 每500ms检查一次，可根据需求调整间隔
});

关键细节说明 #

1. 为什么用轮询？
   如果新打开的页面和原页面不同域，浏览器的同源策略会阻止你直接监听新窗口的unload或beforeunload事件，轮询newTab.closed属性是跨域场景下最稳妥的方案。如果是同源页面，你也可以直接监听newTab.addEventListener('unload', ...)，但轮询的兼容性更强。
2. 避免弹窗拦截
   因为window.open()是在用户的点击事件内触发的，浏览器一般不会拦截这种由用户主动操作触发的弹窗，这点你不用担心。

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