前言
我们现在来想这么一个场景,在掘金的文章管理页打开了一篇文章草稿,然后点击编辑,这个时候打开新标签页 A
,再点击一次编辑,打开了标签页 B
。
此时如果你在 A
编辑, B
是感知不到 A
的内容变动的,因为没做协同编辑。此时再到 B
编辑,那么就可能导致A标签页的内容丢失。
别问我是怎么 YY
出来这种场景的,因为我就真的犯过这种错😓
所以可不可以做一种机制,再第二次点击编辑的时候,弹出一个提示,告诉你这个标签页已经打开过?或者说直接输入 url
的时候,能不能获取到相同的 url
的 tab
页?
如何打开前检测
比如说我们有一个函数 openBoard
,它接受一个 id
参数,用来打开一个编辑页面:
js
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
,具体实现如下:
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
页还存在,没有被关闭,则切换到已经存在的窗口
否则就打开一个新窗口,并维护这份关系。
效果如下
最后
以上就是本文的全部内容,算是一个小知识点吧。五一假期将至,提前祝大家假期愉快~