🚀面试官:打开了一个新窗口,怎么知道这个窗口已经被打开过?🚀

前言

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

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

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

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

如何打开前检测

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

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

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

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

我们可以实现一个 mapidkey ,打开的 windowvalue ,具体实现如下:

js 复制代码
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 页还存在,没有被关闭,则切换到已经存在的窗口

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

效果如下

最后

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

相关推荐
Mintopia几秒前
🤖 微服务架构下 WebAI 服务的高可用技术设计
前端·javascript·aigc
江城开朗的豌豆15 分钟前
React 跨级组件通信:避开 Context 的那些坑,我还有更好的选择!
前端·javascript·react.js
吃饺子不吃馅1 小时前
root.render(<App />)之后 React 干了哪些事?
前端·javascript·面试
鹏多多1 小时前
基于Vue3+TS的自定义指令开发与业务场景应用
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Redux 与 MobX:我的状态管理选择心路
前端·javascript·react.js
Cosolar1 小时前
前端如何实现VAD说话检测?
前端
CodeSheep2 小时前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅2 小时前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒2 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip10 小时前
企业级配置式表单组件封装
前端·javascript·vue.js