后台页面经常会有列表页点击新开窗口进入新增或者编辑页面,新增或者编辑页面保存数据后自动关闭,需要自动刷新列表页数据
使用window.opener
对象从页面B获取到页面A的window对象
页面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>
链接类型 | 描述 |
---|---|
noopener | 指示浏览器打开链接而不授予新的浏览上下文对打开它的文档的访问权限-通过在打开的窗口中不设置Window.opener属性(返回null)。 |
noreferrer | 阻止浏览器导航到另一个页面时,通过Referer:HTTP header将该页面地址或任何其他值作为Referrer发送。 |
opener | 恢复带有target="_blank"的链接上的隐式rel="noopener"添加 |
window.opener && window.opener.location.reload();
使用window.open获取返回的页面B引用,轮询页面B引用的close状态,判断是否页面B是否关闭。
// WindowObjectReference: 打开的新窗口对象的引用。如果调用失败,返回值会是 null 。如果父子窗口满足“同源策略”,你可以通过这个引用访问新窗口的属性或方法。
let windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);
const childPageReference = window.open('/pageB');
const timer = setInterval(() => {
// 轮询子页面状态
if (childPageReference.closed) {
// 子页面关闭
window.location.reload();
clearInterval(timer);
}
}, 100);