最近项目有个需求，查询页面每次点击查询之后，需要弹出一个新窗口显示结果列表。并且在结果列表里面做定时刷新操作，如果结果里面的刷新功能没有被用户停用，而弹出的窗口被关掉了，查询页面等到下一次刷新就要重新弹出一个窗口了。
我的设想是每打开一个新窗口时，查询页面就生成一个时间戳，作为新窗口的一个标识。那么一次查询就对应唯一的一个弹窗。
由于需要定时刷新，在查询页面里，我可以建立一个数组记录当前已打开的新窗口，用时间戳作为key。使用setInterval 做定时器，那么刷新时查询页面需要做的是：
1.遍历新窗口的数组，如果新窗口没有被关闭，那么什么也不用做。
2如果新窗口已经被关闭，看看在关闭前它是否还在刷新状态， 如果是，则用记录的查询参数重新打开窗口。如果关闭前已经停止刷新，那么可以将窗口从数组中去除。
通过上面的思路，可以设计这个记录新窗口的数组，它包含的状态数据为：查询条件，时间戳，是否还在打开，是否还在刷新状态。
主要的判断逻辑如下:
setInterval(() => {
const length = this.getTimerArray.length;
for (let i = 0; i < length; i++) {
const timerItem = this.getTimerArray[i];
// 页面已关闭并且定时器已停止，则从列表中删除
if (!timerItem.refresh && !timerItem.running) {
timerItem.toDelete = true;
} else if (!timerItem.running) {
// 需要刷新但页面已关闭
const stamp = this.goPage(timerItem._params);
timerItem.stamp = stamp;
}
// 将列表中的所有定时器置为非运行状态，由子页面发送的消息置为运行状态
timerItem.running = false;
}
// 处理列表，将已停止的定时器删除
const timerArray = this.timerArray.filter((r) => !r.toDelete);
this.setTimerArray(timerArray);
}, this.getInterval);
然后需要考虑另一个问题：怎么知道打开的新页面已关闭？
也许可以new Window 生成一个对象，然后再打开，但这样就需要把这个对象记录到数组里面，但我想要一个更简单地方法，而不是再花费时间去管理它。
我的设想是通过子页面向opener 持续发送消息，告诉opener 页面还在，一旦页面被关闭，在它下次刷新时就会知道，因为子页面已经不发送消息了。
这里需要用到opener 对象。需要注意的是，当调用window.open 方法时，所传的参数noopener和noreferrer不能为yes。否则，子页面的window.opener 对象将会是空值。
window.open(url, target);
子页面向opener发送消息:
const { interval } = opts[0] || {};
this.interval = interval || REFRESH_INTERVAL;
this.childStamp = getPageStamp();
setInterval(() => {
window.opener.postMessage({
stamp: this.childStamp,
});
}, 1000);
子页面会先从url拿到一个时间戳，然后每秒向opener发送一次消息，带上这个时间戳。opener通过时间戳去区分是从哪个子页面发送过来的，将对应的running 字段置为true.
opener 要接受，需要注册一个事件
window.addEventListener('message', (msg) => {
// console.log('msg', msg);
const {
data: { refresh, stamp },
} = msg;
const length = this.getTimerArray.length;
for (let i = 0; i < length; i++) {
const timerItem = this.getTimerArray[i];
if (timerItem.stamp === stamp) {
if (typeof refresh !== 'undefined') {
timerItem.refresh = refresh;
}
timerItem.running = true;
}
}
});
message事件接收的是postMessage发送的消息。事实上子页面的opener就是主页面，是opener调了postMessage方法，然后在自己的事件里接收了。
