关于vue中对window.openner的使用指南

目录
  • 前言
  • 背景
  • 以失败告终的尝试——EventBus
  • 救星——Window.opener
  • 补充:vue 页面window.opener用法(在子窗体中获得父窗体的方法)
  • 总结
  • 参考资料

前言

先说结论: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()
    }
  }
},

这样问题终于解决啦~

补充:vue 页面window.opener用法(在子窗体中获得父窗体的方法)

1.当通过window.open打开详情页面 查看页数据不发生变化

在子页面调用window.opener.location.reload()//该方法可行,把父页整体刷新,但不保留搜索条件这样破坏了用户输入的查询条件

不全页面刷新,触发“搜索”按钮点击

如图:

子页面调用

父页面

总结

Window.opener可以返回对打开当前窗口的那个窗口的引用,可以使用它调用父页面的方法;当浏览器窗口关闭或者刷新时会触发 beforeunload 事件,当我们界面中有未提交的表单,或者有未保存的文本内容,用户点击关闭按钮,需要浏览器弹出提示框,就需要使用这个事件 onbeforeunload。

参考资料

【1】MDN:window.opener

【2】MDN: Window: beforeunload event

【3】window-onbeforeunload 的使用

到此这篇关于vue中对window.openner使用的文章就介绍到这了,更多相关vue中window.openner使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • window.parent与window.openner区别介绍

    今天总结一下js中几个对象的区别和用法: 首先来说说 parent.window与top.window的用法 "window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一层页面跳转 "top.location.href"是最外层的页面跳转 举例说明: 如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如

  • 关于vue中对window.openner的使用指南

    目录 前言 背景 以失败告终的尝试——EventBus 救星——Window.opener 补充:vue 页面window.opener用法(在子窗体中获得父窗体的方法) 总结 参考资料 前言 先说结论:window.openner是做什么的?在vue中新窗口可以使用window.openner调用父窗口的方法.下面就来通过笔者的文章进行更详细的学习吧! 背景 最近项目中使用到了Mqtt做即时通讯的功能,需求要求主页面全局要有一个消息提示功能,当收到一条消息则小铃铛右上方显示新消息的数目,点击小

  • vue中自定义指令directive的详细指南

    目录 一. 什么是自定义指令 二. 如何自定义指令 钩子函数 三.应用场景 输入框防抖 图片懒加载 一键 Copy的功能 拖拽 总结 一. 什么是自定义指令 我们看到的v-开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能,对普通 DOM元素进行底层操作,这时候就会用到自定义指令.除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令 指令使用的几种方式: //会实例化一个指令,但这个指令没有参数 `v-xxx` // -- 将值传到指令中 `v

  • vue中的dom节点和window对象

    目录 window对象 dom元素 获取dom节点的3种方式 方式一:(事件源) 方式二:(使用ref) 方式三:(自定义全局指令) window对象 首先window对象是浏览器下的默认对象,也就是全局对象,在没有明确指向的时候this指向window.即使切换路由,window对象里面的属性和方法依旧会保留.因此可以在控制栏直接输入this.window.self都可以直接打印window对象.window对象很很多默认的方法和属性. 一切全局变量和方法都是window的属性和方法,也就是只

  • vue中window.onresize的使用解析

    目录 window.onresize的使用 说下重点 window.onresize笔记 1.浏览器尺寸变化响应事件 2.谷歌浏览器中 3.页面尺寸变更事件 window.onresize的使用 说下重点 window.onresize只能在一个组件中使用,如果多个组件调用则会出现覆盖情况,所以我的解决方案是在App.vue中使用,获取document.documentElement.clientWidth(即浏览器宽度)存放在vuex中,别的组件只需要用computed(计算属性)将vuex的

  • Vue中如何给Window对象添加方法

    目录 给Window对象添加方法 为window对象添加事件处理程序 给Window对象添加方法 大家都知道vue中所有元素都是作用于Vue实例的,可是我使用DCloud的Wap2App打包App之后需要配置sitemap.json,配置onclick事件,但是该事件只能绑定Window下的方法,所以此时就需要在Vue中定义一个方法,并将其绑定在Windows对象下 首先在 App.vue methods 中定义一个方法 methods:{     share(){         //微信分享

  • Vue中iframe 结合 window.postMessage 实现跨域通信

    目录 一.前言 二.应用场景 2.1 嵌入页面 2.2 postMessage 实现父子页面通信 2.3 子页面向父页面传值 2.4父页面代码: 一.前言 什么是iframe? iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 什么是postMessage? window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数

  • VUE中使用Vue-resource完成交互

    本文介绍了VUE中使用Vue-resource完成交互,分享给大家,具体如下 使用vue-resource 引入vue-resource vue-resource就像jQuery里的$.ajax,是用来跟后端交互数据的,vue-resource是vue的一个插件,所以我们在开始使用vue之前,需要先引入vue-resource.js这个文件 <script src='js/vue.js'></script> <script src='js/vue-resource.js'&g

  • Vue中建立全局引用或者全局命令的方法

    如何在Vue中建立全局引用或者全局命令,具体内容如下 1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到相同模块(或者插件).我们不想每个文件都import 一次模块. 如果是基于vue.js编写的插件我们可以用 Vue.use(...) main.js 2 但是如果想添加一个全局命令,同时又让每个vue的文件都能用到怎么办? 第一步:最好建立一个全局的命令文件例如:directive/directive.js 第二步:利用Vue.directive()建立一个全局

  • vue中实现滚动加载更多的示例

    在以前的前端刀耕火种时代要实现滚动加载更多想要大家都是很快实现了,在vue会有一点麻烦,最近自己研究了一下,做了一个简单的demo,供大家参考: <template> <div> <ul> <li v-for="item in articles"> <h2>{{item.title}}</h2> <img :src="item.images" alt=""> &l

随机推荐