前端 2020-07-09 17:49:17

后台页面经常会有列表页点击新开窗口进入新增或者编辑页面,新增或者编辑页面保存数据后自动关闭,需要自动刷新列表页数据

1. 方法一(建议)

使用window.opener对象从页面B获取到页面A的window对象

页面A

页面A打开页面B

window.open('/pageB');

或者使用a标签

<a
  href={`/pageB`}
  target="_blank"
  rel="opener"
>打开B页面</a>

<font color=red> 注意:a标签的rel不能设置noreferrer,否则B页面的window.opener会是null </font>

rel属性
链接类型 描述
noopener 指示浏览器打开链接而不授予新的浏览上下文对打开它的文档的访问权限-通过在打开的窗口中不设置Window.opener属性(返回null)。
noreferrer 阻止浏览器导航到另一个页面时,通过Referer:HTTP header将该页面地址或任何其他值作为Referrer发送。
opener 恢复带有target="_blank"的链接上的隐式rel="noopener"添加

页面B

window.opener && window.opener.location.reload();

方法二

使用window.open获取返回的页面B引用,轮询页面B引用的close状态,判断是否页面B是否关闭。

// WindowObjectReference: 打开的新窗口对象的引用。如果调用失败,返回值会是 null 。如果父子窗口满足“同源策略”,你可以通过这个引用访问新窗口的属性或方法。
let windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);
页面A
const childPageReference = window.open('/pageB');

const timer = setInterval(() => {
  // 轮询子页面状态
  if (childPageReference.closed) {
    // 子页面关闭
    window.location.reload();
    clearInterval(timer);
  }
}, 100);

故障排除

  1. 页面A和页面B需要满足同源策略

参考资料

  1. window.opener
  2. 链接类型