🚀面试官：打开了一个新窗口，怎么知道这个窗口已经被打开过？🚀

前言

我们现在来想这么一个场景，在掘金的文章管理页打开了一篇文章草稿，然后点击编辑，这个时候打开新标签页 A ，再点击一次编辑，打开了标签页 B 。

此时如果你在 A 编辑， B 是感知不到 A 的内容变动的，因为没做协同编辑。此时再到 B 编辑，那么就可能导致A标签页的内容丢失。

别问我是怎么 YY 出来这种场景的，因为我就真的犯过这种错😓

所以可不可以做一种机制，再第二次点击编辑的时候，弹出一个提示，告诉你这个标签页已经打开过？或者说直接输入 url 的时候，能不能获取到相同的 url 的 tab 页？

如何打开前检测

比如说我们有一个函数 openBoard ，它接受一个 id 参数，用来打开一个编辑页面：

export const openBoard = (id) => {
  const url = `${location.protocol}//${location.host}/board/${id}`;
  window.open(url);
};

我们来看一下 window.open 这个 api ，它其实是有返回值的：

一个 WindowProxy (en-US) 对象。只要符合同源策略安全要求，返回的引用就可用于访问新窗口的属性和方法。

我们可以实现一个 map ， id 为 key ，打开的 window 为 value ，具体实现如下：

let openWindowMap = {};
export const openBoard = (id) => {
  const url = `${location.protocol}//${location.host}/board/${id}`;
  const openedWindow = openWindowMap[id];
  if (openedWindow && !openedWindow.closed) {
    // 如果窗口已存在且未关闭
    openedWindow.focus(); // 切换到已存在的窗口
  } else {
    const newWindow = window.open(url); // 打开一个新窗口
    openWindowMap[id] = newWindow;
  }
};

点击打开链接的时候判断一下这个链接是否被打开过，如果已经被打开过，且打开的 tab 页还存在，没有被关闭，则切换到已经存在的窗口

否则就打开一个新窗口，并维护这份关系。

效果如下

最后

以上就是本文的全部内容，算是一个小知识点吧。五一假期将至，提前祝大家假期愉快～