浏览器子Tab能控制父Tab吗

前言

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

话说回来，今年文章更新的频率降低了，主要缘由是部门老大给我安排了新的任务，让我作主程，项目进度都得本身把控，包括测试和上线都要我去督促，因此就耽误了学习了，不过我在开发过程当中，解决了一个比较有趣的问题，这是早些年困扰过个人问题，此次解决了以为比较有趣，就分享给你们。

分析需求

产品🐶来了一个需求，大概是这样的。有一个列表页面 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 方法，刷新当前页面的数据，获得编辑后的结果。

总结

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