• window.onload事件 设置页面加载时执行的动作,即进入页面的时候执行的动作

  • window.onunload 已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用一般用于设置当离开页面以后执行的动作

  • window.onbeforeunload 是正要去服务器读取新的页面时调用,此时还没开始读取,简单来说就是 在离开页面前的,一般用做提醒问你是不是要离开这个页面

onunload和onbeforeunload都是在页面刷新和关闭前的动作,但是onbeforeunload是先于onunload的,并且 onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到

页面加载:onload
页面关闭:onbeforeunload →onunload
页面刷新:onbeforeunload →onunload→onload

在 MDN Web Docs 是这样介绍 window.onunload的:
在这里插入图片描述

最终代码整合,可以自己放开 debugger 进行断点测试:

mounted () {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.addEventListener('unload', e => this.unloadHandler(e))
  },
  destroyed () {
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.removeEventListener('unload', e => this.unloadHandler(e))
  },
  methods: {
    beforeunloadHandler (e) {
      // debugger
      this._beforeUnload_time = new Date().getTime()
      console.log('this._beforeUnload_time:', this._beforeUnload_time)
      e = e || window.event
      if (e) {
        e.returnValue = '关闭提示'
      }
      // debugger
      return '关闭提示'
    },
    unloadHandler () {
      console.log('this._beforeUnload_time2:', this._beforeUnload_time)
      this._gap_time = new Date().getTime() - this._beforeUnload_time
      console.log('this._gap_time:', this._gap_time)
      // 判断是窗口关闭还是刷新
      if (this._gap_time <= 5) {
        // debugger
        // 如果是登录状态,关闭窗口前,移除用户
        if (!this.showLoginButton) {
          $.ajax({
            url: '/pictureweb/user/remove',
            type: 'get',
            async: false // 或false,是否异步

          })
        }
      } else {
        // debugger
      }
    }
  }

2021.9.3 更新

判断网页页面是否关闭或刷新的方法:
主要是针对网页版的页面,判断触发onbeforeunload事件的时候 :
1. 鼠标是否点击了关闭按钮;
2. 是否按了ALT+F4;
这两种方式来关闭网页,如果是,则认为系统是关闭网页,否则在认为系统是刷新网页。

window.onbeforeunload = function (event) {
  alert ("===οnbefοreunlοad===");
  if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
    alert ("你关闭了浏览器");
  } else {
    alert ("你正在刷新页面");
  }
}
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐