监听浏览器刷新和关闭事件；visibilitychange

Lily.C

已于 2024-01-17 10:41:37 修改

阅读量3k

点赞数 1

分类专栏： Javascript 文章标签：前端 javascript

于 2023-02-10 11:07:25 首次发布

本文链接：https://blog.csdn.net/weixin_44311458/article/details/128966346

版权

Javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

visibilitychange事件介绍简单的说，浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。


document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
        // 离开当前tab标签
        console.log('离开当前tab标签')
        // 暂停视频
    } else {
        // 播放视频
        console.log('回到当前tab标签')
    }
})

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

1.需求背景：

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

2.需求分析：

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

3.实现方式：


mounted() {       
    window.addEventListener('beforeunload', (e) => this.beforeunloadHandler(e))
    window.addEventListener('unload', this.updateHandler)
},
methods: {
    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状态中，但其实服务器端已经接收到该请求，亲测有效！