onbeforeunload事件之关闭浏览器之前的提示弹框

简介: onbeforeunload事件之关闭浏览器之前的提示弹框

问题描述

对于表单填写信息的页面,有时候会出现用户填写了一部分不小心“离开”了这个页面,那么这个时候,产品说,需要再做一个用户提示,问问用户是不是真的要离开这个页面。针对于这个需求,我们把具体“离开”的方式分为两种情况

情况一 离开当前路由页面去到别的路由页面

这种情况比较好处理,就是直接判断表单填写的信息是否变化了,如果变化了,做个弹框询问一下,没变化直接放行。或者使用beforeRouteLeave钩子做控制。比如我之前的文章:https://juejin.cn/post/6932100597789245448

情况二 直接关闭浏览器tab标签页或关闭浏览器

对于这种情况下(比如是误操作),那么我们可以使用浏览器自带的onbeforeunload事件去做控制

onbeforeunload事件

onbeforeunload还有两个兄弟,这里一块介绍下

onload、和onbeforeunload、和onunload介绍

我们先看一下浏览器自带的三个比较常见的事件

  • onload(网页加载完毕后立刻执行的操作,很像vue的mounted钩子)
  • onbeforeunload(网页卸载之前的操作,很像vue的beforeDestroy钩子)
  • onunload(网页卸载了的操作,很像vue的destroyed钩子,与destroyed不同的是,onunload如果是刷新页面的话,onunload执行完以后,又会重新加载页面即:DOM树+CSSOM=>render tree...这样的操作)

onload、onbeforeunload、onunload执行顺序

注意一下它们三个的执行顺序

  • 当我们打开页面看到网页内容的时候,其实onload已经执行完毕了
  • 当我们关闭页面的时候,会先触发onbeforeunload事件的执行
  • 当我们刷新页面的时候,会: onbeforeunload --> onunload --> onload

vue中的onbeforeunload写法

<template>
  <div class="wrap123">
    <h2>我是表单填写页面</h2>
  </div>
</template>

<script>
export default {
  mounted() {
    // 存一份this
    let _this = this;
    window.onbeforeunload = function(e) {
      // 那个路由页面需要,就把path的名字修改成那个,比如我当前页面的path是/vue
      if (_this.$route.path == "/vue") {
        // 兼容IE8和Firefox 4之前的事件对象写法(不加也行,现在少有项目兼容老版本浏览器了)
        e = e || window.event;
        if (e) {
          e.returnValue = "returnValue属性值的文字不能自定义,写不写都行的";
        }
        // Chrome支持, Safari支持, Firefox 4版本以后支持, Opera 12版本以后支持 , IE 9版本以后支持
        return "returnValue属性值的文字不能自定义,写不写都行的";
      }
    };
  },
  beforeDestroy() {
    // 离开页面时候再清除
    window.onbeforeunload = () => {};
  }
};
</script>
<style lang="less" scoped>
.wrap123 {
  width: 600px;
  height: 400px;
}
</style>

浏览器效果图

当我们刷新或者关闭浏览器的时候,就会出现下图这样的效果

111.png

222.png

333.png

长得都差不多...

注意事项

  • 提示框的样式无法修改,只能用自带的弹框
  • 提示框的文字e.returnValue也无法自定义,至于写的原因是因为:onbeforeunload函数中应当将一个说明字符串赋值给Event对象的returnValue属性,并return出去,这样才会触发浏览器自带的确认离开弹框出现
MDN官方文档: https://developer.mozilla.org/zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload

w3school官方文档:https://www.w3school.com.cn/jsref/event_onbeforeunload.asp

兼容性不错,大家放心用吧 ^_^

相关文章
|
5月前
|
JavaScript 开发者
什么是浏览器环境下事件的 Propagation
什么是浏览器环境下事件的 Propagation
|
5月前
|
Web App开发 前端开发
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
213 0
|
2月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
58 1
|
2月前
|
JavaScript API
VUE——监听浏览器关闭及标签页关闭事件
VUE——监听浏览器关闭及标签页关闭事件
87 0
|
3月前
|
JavaScript 前端开发 开发者
浏览器事件机制详解
浏览器事件机制详解
34 1
|
3月前
|
JavaScript
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
39 1
|
3月前
|
前端开发 JavaScript
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
261 0
|
5月前
|
JavaScript 前端开发
js阻止浏览器默认事件和防止事件传播事件
js阻止浏览器默认事件和防止事件传播事件
66 3
|
5月前
|
JavaScript 开发者
什么是浏览器环境下的 Event Propagation(事件传播)
什么是浏览器环境下的 Event Propagation(事件传播)
|
5月前
|
Web App开发 移动开发 JavaScript
【Vue版】实现拖拽、排序效果(注意,这个方法在chrome谷歌浏览器上面不适用,dragend会情不自禁触发drag事件先执行,有点像浏览器的一个bug)
【Vue版】实现拖拽、排序效果(注意,这个方法在chrome谷歌浏览器上面不适用,dragend会情不自禁触发drag事件先执行,有点像浏览器的一个bug)
下一篇
无影云桌面