先讲结果：window.openner是干什么的？在vue中新页面可以用window.openner启用父窗口方式。下面来根据小编的文章内容开展更详细的了解一下吧！
环境
最近项目中应用到Mqtt做即时通信的功效，要求规定主界面全局性要有一个消息提醒作用，当接到一条消息则小玲铛右上角表明最新动态的数量，点一下小玲铛则全局性终止接受信息而且浏览器新页面，在页面中接受信息，如图所示：
想要实现以上要求应该考虑如下所示几个方面：
（1）在父页面上创建Mqtt联接并接受信息
（2）点一下小玲铛时，断掉父网页页面mqtt联接而且在新页面打开网址
（3）在页面中创建Mqtt联接并接受信息
（4）新窗口关闭时，要通告父网页页面建立新的Mqtt联接并接受信息
无功而返的尝试——EventBus
小脑瓜想来想去以后，确认了关键环节那不就取决于新页面关掉了通知一下父对话框吗~ 用EventBus看一下吧！因此写如下所示编码：
main.js文档中：
Vue.prototype.$EventBus = new Vue()
父页面上写一个方式用以在新页面中开启子页面：
toServerWorkbench() {
const path = this.$router.resolve({ name: 'CustomerService' })
window.open(path.href, '_blank')
},
父网页页面created生命期中监视reConnect事情：
this.$EventBus.$on('reConnect', () => {
console.log('接到电话重连')
this.getMqttInfo()
})
新页面网页页面beforeDestroy生命期中开启reConnect事情：
this.$EventBus.$emit('reConnect', {})
几下子编码写完了，幸福感爆棚觉得能够捞鱼了！但是一检测发觉没有用（蓝廋香菇）~想了一下，不好使没什么问题啊，全是新页面开启页面跟以前页面不是一个vue案例了，就没办法应用EventBus开展通信了。
保护神——Window.opener
因此搜集资料了解到了Window.opener能够回到对开启现阶段窗口那个窗口的引入。也就是说假如A开启了B，那样B中可以用Window.openner来引入A。
因此写如下所示编码：
父网页页面created生命期：
window.reConnect = () => {
console.log('接到电话重连')
this.getMqttInfo()
};
这一段编码给父网页页面增加了一个reConnect方式，留意要加到了window上，那样才能进行window.openner得到这一reConnect方式。
子页面beforeDestroy生命期：
if (window.opener && window.opener.reConnect) {
window.opener.reConnect()
} else {
window.opener.frames[0].reConnect()
}
留意，这一段编码写上子页面的beforeDestroy中都是失灵的，在关掉子页面时父界面的reConnect方式根本无法被启用。
接着又搜集资料了解到了window的onbeforeunload事情，当浏览器窗口关掉或是更新时，会开启 beforeunload 事情。
有了这样的事情，大家能使网页页面可以开启一个确定提示框，了解客户是不是真的想离开该网页页面。如果用户确定，电脑浏览器将导航栏到新窗口，不然导航栏可能撤销。相同的，大家可以在这件事情中启用父界面的方式，如下所示编码所显示：
created() {
window.onbeforeunload = () => {
if (window.opener && window.opener.reConnect) {
window.opener.reConnect()
} else {
window.opener.frames[0].reConnect()
}
}
},
那样难题总算处理啦~
汇总
Window.opener能够回到对开启现阶段窗口那个窗口的引入，可以用它启用父界面的方式；当浏览器窗口关掉或是更新的时候会开启 beforeunload 事情，在我们页面含有未提交的表格，或者是有未存放的文本信息，用户点击关闭按钮，必须电脑浏览器弹出提示框，就需要使用这件事情 onbeforeunload。
参考文献
【1】MDN：window.opener
【2】MDN: Window: beforeunload event
【3】window-onbeforeunload 的应用