汕头地区做网站的,如何做品牌推广方案,怎么做网站关键词推广,长沙模板网站建设前言
我们现在来想这么一个场景#xff0c;在掘金的文章管理页打开了一篇文章草稿#xff0c;然后点击编辑#xff0c;这个时候打开新标签页 A #xff0c;再点击一次编辑#xff0c;打开了标签页 B 。
此时如果你在 A 编辑#xff0c; B 是感知不到 A 的内容变动的在掘金的文章管理页打开了一篇文章草稿然后点击编辑这个时候打开新标签页 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 页还存在没有被关闭则切换到已经存在的窗口
否则就打开一个新窗口并维护这份关系。
效果如下 最后
以上就是本文的全部内容算是一个小知识点吧。五一假期将至提前祝大家假期愉快
