浏览器子Tab能控制父Tab吗

728 阅读3分钟

前言

疫情无情人有情,在疫情期间,在家窝了小一个月,回杭发现自己胖了几斤。去年秋天的减肥之旅,付之东流。

话说回来,今年文章更新的频率下降了,主要原因是部门老大给我安排了新的任务,让我做主程,项目进度都得自己把控,包括测试和上线都要我去督促,所以就耽误了学习了,不过我在开发过程中,解决了一个比较有趣的问题,这是早些年困扰过我的问题,这次解决了觉得比较有趣,就分享给大家。

分析需求

产品🐶来了一个需求,大概是这样的。有一个列表页面 A,列表的每一项都有一个编辑功能,点击编辑功能跳转到新的页面,然后编辑该项,结束之后点击确认按钮,要把当前编辑页面关闭,并且要保证列表页面 A 刷新,展示出最新的编辑情况,画个示意图如下。

试问两个 Tab 怎么通信呢,纵然你是神,你也得老老实实做如下操作:

找到答案

经过一番搜索,找到了一个比较这个需求的解决方案,那就是 window.opener 这个全局属性。先来介绍一下它。

opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用。当使用 window.open() 打开一个窗口,您可以使用此属性返回来自目标窗口源(父)窗口的详细信息。 代码提示: window.opener.close() 将关闭源(父)窗口。

简单的说,就是我现在可以通过在编辑页面 B 通过 window.opener 拿到列表页 A 的全局对象。

再看看它的浏览器支持情况:

数据来源于 www.caniuse.com 这个网站专门查询一些浏览器对属性的兼容性。从图片中可以看出 opener 的支持情况还是比较乐观的,大多数浏览器都已支持。

那么问题就变得简单了,假设 A 页面获取数据的方法是 LoadData,那么我将 LoadData 挂载到 A 页面的一个全局变量上,代码如下:

window._A_LOADDATA = LoadData;

全局变量一定要注意要规范一些,避免造成全局变量的污染,最好 A 页面销毁的时候,清除一下 window._A_LOADDATA

然后在 B 页面,编辑完信息提交保存接口的回调函数处调用 window.opener._A_LOADDATA 方法:

savaEdit().then({
  window.opener._A_LOADDATA()
  window.close()
})

这样执行 window.opener._A_LOADDATA() 后,列表页 A 就会执行 LoadData 方法,刷新当前页面的数据,得到编辑后的结果。

总结

问题不难,但是希望大家能学到的是解决问题的这个过程,不要一有问题就去群里问:“有大佬在吗?帮我解决一下**问题”。我可以很明确的告诉你,身为大佬的我,鸟都不想鸟你(开个玩笑),自己去百度搜答案去吧。大多数问题搜索引擎加上自己的一些分析和理解能力,都是可以迎刃而解的,实在解决不了,再去请求自己上司的帮助,相信他不会为难你。