精华内容
下载资源
问答
  • 主要介绍了Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 但是发现 beforeDestroy 只能监听页面间的跳转,无法监听页面刷新和关闭标签页。 所以还是要借助 onbeforeunload 事件。 顺便复习了一下 JavaScript 中的一些加载,卸载事件页面加载时只执行 onload 事件...
  • vue 监听网页关闭/浏览器关闭事件

    千次阅读 2021-01-06 10:17:40
    参考博文:vuejs中监听窗口关闭和窗口刷新事件的方法 1.methods中定义窗口关闭/浏览器关闭之后处理内容,例如删除cookie、session、local storage 等 methods: { beforeunloadHandler(e) { console.log('关闭...

    参考博文:vuejs中监听窗口关闭和窗口刷新事件的方法

    1.methods中定义窗口关闭/浏览器关闭之后处理内容,例如删除cookie、session、local storage 等

    methods: {
        beforeunloadHandler(e) {
          console.log('关闭窗口之后')
        }
    }

    2.mounted 绑定窗口关闭监听事件

    mounted() {
        window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    }

    3.destroyed 解绑事件

    destroyed() {
        window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
    }

    以上方法刷新页面也会触发

    仅监听浏览器关闭事件,参考博客:Vue中监听窗口关闭事件,并在窗口关闭前发送请求

    展开全文
  • 1、使用[removed]之类的API [removed] = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的...2、在生命周期钩子中注册监听事件 methods: { beforeunloadHandler (e) { // ... } } 在 mounted
  • Vue监听关闭网页事件

    2021-09-24 14:46:30
    接到新需求,需要在关闭网页时删掉localStorage这些东西 上代码 methods: { beforeunloadHandler(e) { //方法 } } mounted() { window.addEventListener('beforeunload', e => this.beforeunloadHandler...

    接到新需求,需要在关闭掉网页时删掉localStorage这些东西

    上代码

    
    methods: {
        beforeunloadHandler(e) {
          //方法
        }
    }
    
    mounted() {
        window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    }
    
    destroyed() {
        window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
    }
    
    展开全文
  • vue监听页面刷新和关闭事件

    千次阅读 2019-12-11 19:56:03
    vue监听页面刷新和关闭事件 需求背景 在离开页面的时候,需要弹出提示框,让用户确定是否真的要关闭网页。如果用户真的需要关闭网页,则让浏览器向后台提交信息。 原始实现 在beforeDestory钩子函数中,调用提交操作...
    vue监听页面刷新和关闭事件
    需求背景

    在离开页面的时候,需要弹出提示框,让用户确定是否真的要关闭网页。如果用户真的需要关闭网页,则让浏览器向后台提交信息。

    原始实现

    在beforeDestory钩子函数中,调用提交操作。

    beforeDestroy () {
        this.updateRecord()
      },
    

    经实验验证,该方法无法达到目的。

    发现beforeDestroy 只能监听到页面间的跳转,无法监听到页面刷新和关闭标签页。所以还是要借助 onbeforeunload 事件。

    浏览器页面事件基础

    页面加载时只执行 onload 事件。
    页面关闭时,先 onbeforeunload 事件,再 onunload 事件。
    页面刷新时先执行 onbeforeunload事件,然后 onunload 事件,最后 onload 事件。
    ** onbeforeunload事件介绍 **

    onbeforeunload事件在即将离开当前页面(刷新或关闭)时触发。此时页面文档依然可见,且该事件的默认动作可以被取消。

    window.onbeforeunload = function (e) {
      e = e || window.event;
    
      // 兼容IE8和Firefox 4之前的版本
      if (e) {
        e.returnValue = '关闭提示';
      }
    
      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      return '关闭提示';
    };
    

    可以在用户离开页面之前弹出一个确认框,让用户确认是否要真的刷新或离开当前页面。如果用户确认重载或离开,页面将会刷新或关闭。如果取消重载或离开,则关闭操作会被取消,onunload事件不会被触发。

    onunload事件介绍

    当页面关闭后,会触发unload事件。该事件不可取消。

    页面刷新和关闭的事件监听
    1. 在methods中定义事件方法
     methods: {
        leaveConfirm (e) {
          e = e || window.event
          if (e) {
            e.returnValue = '关闭提示'
          }
          return '关闭提示'
        },
        updateRecord () {
          // 调用后台接口
        }
     }
    

    注意:

    updateRecord需要使用同步方法,或者使用Navigator.sendBeacon(),否则可能会因为页面卸载导致终止了对后台的访问。
    2.在created 或者 mounted 生命周期钩子中绑定beforeunload事件和unload事件

     created () {
        window.addEventListener('beforeunload', this.leaveConfirm)
        window.addEventListener('unload', this.updateRecord)
     }
    
    1. 在 destroyed 钩子中卸载已绑定的事件
     destroyed () {
        window.removeEventListener('beforeunload', this.leaveConfirm)
        window.removeEventListener('unload', this.updateRecord)
      }
    
    向后台提交数据

    若使用axios直接向后台提交数据,数据存在没有被提交的可能。因为axios是异步请求,请求可能会在浏览器关闭或重新加载前还未发送至服务端就被浏览器cancel掉,导致数据上报失败。异步请求响应返回后,由于页面和相关资源已经卸载,会引起function not found的错误。

    1. 通过XMLHttpRequest发送同步请求
    updateRecord(){
      var xmlhttp = new XMLHttpRequest(); 
      let data = {"id":"1111","resumeStatus":"1"};
      xmlhttp.open("POST", "http://localhost:8080/updateRecord", false);
      xmlhttp.setRequestHeader('Content-Type','application/json;charset=UTF-8')
      xmlhttp.send(JSON.stringify(data)); 
    }
    
    1. navigator.sendBeacon
    updateRecord(){
      navigator.sendBeacon(url,data)
    }
    

    更多详细内容见刷新或关闭浏览器时,向后台提交数据

    展开全文
  • vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求1.需求背景:2.需求分析:3.实现方式:4.实现方式解析:1)浏览器页面事件基础2)在mounted监听beforeunload和unload事件5.存在的问题/风险点:1)为了...

    1.需求背景:

    用户离开页面前,修改数据未进行保存操作,提示框提醒用户,并发送接口请求告知后端清空已修改数据。

    2.需求分析:

    可以再在beforeDestory钩子函数中,调用接口操作,但该方法只能实现路由切换,当前组件销毁时会触发,不能解决浏览器页面关闭和页面刷新触发该请求,所以还是要借助window.onbeforeunload事件。

    3.实现方式:

    mounted() {
            window.addEventListener('beforeunload', (e) => this.beforeunloadHandler(e));
            window.addEventListener('unload', this.updateHandler);
        }
    beforeunloadHandler(e) {
            e = e || window.event;
            if (e) {
                e.returnValue = '关闭提示';
            }
            return '关闭提示';
        }
    updateHandler() {
            fetch('url', {
                method: 'POST',
                body:'参数'
                headers: {'Content-Type': 'application/json'},
                keepalive: true
            });
        }
    

    4.实现方式解析:

    1)浏览器页面事件基础

    页面加载时只执行 onload 事件。
    页面关闭时,先 onbeforeunload 事件,再 onunload 事件。
    页面刷新时先执行 onbeforeunload事件,然后 onunload 事件,最后 onload 事件。

    2)在mounted监听beforeunload和unload事件

    当执行页面刷新关闭操作时,会触发onbeforeunload事件,在该事件绑定的方法中,return一个值(为true的值)浏览器会弹出一个提示框,否则不会弹出,提示框如下图所示
    在这里插入图片描述

    在这里插入图片描述

    当点击取消按钮时,会阻断,不会执行任何操作,当点击重新加载/离开按钮时会触发unload事件,在该事件中调用请求方法即可。

    5.存在的问题/风险点:

    1)为了避免意外弹出窗口,在页面加载完毕的情况下,用户没有click、dbclick、touch等主动交互行为,直接执行关闭/刷新操作是不会弹出提示框的;

    2)浏览器提示框的样式和内容是默认的,不能更改;

    3)在关闭/刷新页面前发送的请求,如果使用axios方式,由于是异步的,在执行刷新/关闭操作时,存在请求还未发送到服务端就被浏览器cancle掉。Fetch API提供了一套健壮的与服务器端交互的方式,提供了跨越不同平台 API 的一致接口。它提供了一个keepalive属性,保证不管发送请求的页面关闭与否,请求都会持续直到结束。不过上传数据的限制是64 KB。

    4)在执行刷新页面操作时,触发请求,在控制台中会发现该请求一直在pending状态中,但其实服务器端已经接收到该请求,亲测有效!

    展开全文
  • Vue监听窗口关闭事件,并在窗口关闭前发送请求

    万次阅读 多人点赞 2019-05-27 14:48:56
    网上很多博客说监听窗口关闭事件使用window.beforeunload,但是这个监听事件也会在页面刷新的时候执行,经过百度和自己的实际测试,终于解决了这个问题,代码如下: mounted() { window.addEventListener('...
  • 今天小编就为大家分享一篇Vue监听事件实现计数点击依次增加的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • window.onload事件 设置页面加载时执行的动作,即进入页面的时候执行的动作。 window.onunload 已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用,一般用于设置当离开页面以后执行的动作。 ...
  • vue 监听页面刷新与页面关闭事件

    千次阅读 2020-01-07 10:59:26
    //添加监听事件 window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) } methods:{ beforeunloadHandler(e){ // todo 在页面刷新或关闭之前需要处理得操作,例如清除或保存数据 } }...
  • 主要介绍了vue 弹窗时 监听手机返回键关闭弹窗功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值(页面不跳转) ,需要的朋友可以参考下
  • vue监听关闭弹窗

    千次阅读 2020-04-24 15:24:20
    vue事件监听关闭弹窗 <button @click="showCart = true">打开购物车</button> <div class="my-float-cart" ref="myDiv" v-show="showCart"> 购物车内容这里忽略代码 </div> // 监听...
  • vue监听浏览器窗口关闭

    千次阅读 2020-09-11 17:34:15
    vue监听浏览器窗口关闭 需求:后端需要在用户退出或者关闭页面的时候调用一个接口 相关技术点: 页面关闭和刷新时, 触发 beforeunload事件 当文档或一个子资源正在被卸载时, 触发 unload事件,unload在beforeunload...
  • Vue监听页面刷新与关闭

    万次阅读 2019-06-25 16:28:46
    最近项目一个需求,在离开(跳转或者关闭)购物车页面或者刷新购物车页面的时候向服务器提交一次购物车商品数量的变化。...但是发现 beforeDestroy 只能监听页面间的跳转,无法监听页面刷新和关闭标签页。...
  • vue监听页面关闭前发送请求

    千次阅读 2019-11-13 16:53:03
    vue监听页面关闭前发送请求 1.data中定义参数 2. methods中定义方法 beforeunloadHandler(){ this._beforeUnload_time=new Date().getTime(); }, unloadHandler(e){ this._gap_time=new Date().get...
  • vue项目中监听页面刷新和关闭

    千次阅读 2021-01-07 14:25:07
    在实际开发项目中,有时候我们需要在刷新和关闭时,触发一些功能,那么如何监听页面的刷新和关闭呢? 1. 在methods中定义事件方法: methods: { beforeunloadFn(e) { console.log('刷新或关闭') // ... } } 2...
  • vue监听浏览器关闭方法

    万次阅读 2018-10-31 16:31:25
    我需要在页面关闭时清空本地储存的一个cookie 方法: window.addEventListener( ‘beforeunload’,e =&amp;gt;( 执行… ) ) mounted () { window.addEventListener('beforeunload', e =&amp;gt; { ...
  • 使用技术:目前使用的技术是 后端Springboot 权限用的是SpringSecurity,前端页面Vue+Element,公司看板的使用人大多利用谷歌浏览器查看。。 前端请求权限流程:用户登陆后会把用户的信息加密处理放进cookies,,...
  • 2:显示pdf弹窗,创建监听事件监听页面点击,执行后隐藏弹窗同时取消监听事件)。 安装pdfObject:过程简单直接:npm i pdfobject --save 创建pdf弹窗代码如下: <div ref='pdfDiv' id='pdfBox' class="pdf...
  • 移动端可以用pagehide
  • vue 监听F11按钮事件

    千次阅读 2020-05-13 16:37:41
    window.addEventListener("keydown", this.KeyDown, true)// 监听按键事件 } methods: { KeyDown (event) { if (event.keyCode === 122) { event.returnValue = false this.fullScreen() //触发全屏的按钮 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,412
精华内容 3,764
关键字:

vue监听页面关闭事件

vue 订阅