vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求

1.需求背景：
2.需求分析：
3.实现方式：
4.实现方式解析：
- 1）浏览器页面事件基础
- 2）在mounted监听beforeunload和unload事件
5.存在的问题/风险点：
- 1）为了避免意外弹出窗口，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，直接执行关闭/刷新操作是不会弹出提示框的；
- 2）浏览器提示框的样式和内容是默认的，不能更改；
- 3）在关闭/刷新页面前发送的请求，如果使用axios方式，由于是异步的，在执行刷新/关闭操作时，存在请求还未发送到服务端就被浏览器cancle掉。Fetch API提供了一套健壮的与服务器端交互的方式，提供了跨越不同平台 API 的一致接口。它提供了一个keepalive属性，保证不管发送请求的页面关闭与否，请求都会持续直到结束。不过上传数据的限制是64 KB。
- 4）在执行刷新页面操作时，触发请求，在控制台中会发现该请求一直在pending状态中，但其实服务器端已经接收到该请求，亲测有效！

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监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求相关推荐

vue监听浏览器tab切换
vue监听浏览器tab切换描述监听tab切换浏览器页面,在离开当前页面和再次进来发生事件监听,类似与小程序的show函数 visibilitychange 详解解决 created() {doc ...
Vue监听浏览器前进后退物理返回键(浏览器自带的)
Vue监听浏览器前进后退物理返回键在某些需求下要监听用户物理按键. popstate事件只会在页面不跳转的情况下,路由发生变化触发. created() { // 创建vm实例后执行// 浏览器控制 ...
vue 监听浏览器页面关闭_前方高能，这是最新的一波Vue实战技巧，不用则已，一用惊人...
❝ 葡萄美酒夜光杯,欲饮琵琶产品催.客户现场君莫笑,古来埋坑几人回? ❞ 最近一直在开发后台管理系统,日复一日的重复着表单表格表格表单,标准的CV仔,感觉好无聊,如何能在这种无聊的开发过程中去提升自己 ...
vue监听移动设备的返回事件
在公共方法文件common.js中实现一个存储当前历史记录的方法 common.js // 存储当前历史记录点,实现控制手机物理返回键的按钮事件 var pushHistory = function ...
vue监听浏览器窗口大小变化,做对应的操作
页面初始化mounted的时候,通过document.body.clientWidth和document.body.clientHeight获取到浏览器的宽和高,然后通过 window.onresiz ...
vue监听浏览器刷新和关闭；
注意:区分不了浏览器是触发了刷新还是关闭,而且提示的弹框是无法自定义的:如果有大佬有方法能区分,还请评论学习一下!感谢! 代码可直接复制: <template><div>< ...
vue 监听浏览器刷新
1.在mounted中加入如下代码 window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) 复制代码 ...
linux输入数字切换浏览器tab,js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 --IT唐伯虎摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventList ...
js监听浏览器关闭事件(区分刷新和关闭,兼容IE9,10,11,Edge，Chrome和Firefox)
由于各浏览器兼容性不同,所以首先要先区分各浏览器 var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = use ...

vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求

vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求

1.需求背景：

2.需求分析：

3.实现方式：

4.实现方式解析：

1）浏览器页面事件基础

2）在mounted监听beforeunload和unload事件

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

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

2）浏览器提示框的样式和内容是默认的，不能更改；

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

vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求相关推荐

最新文章

热门文章