• 欢迎光临~

VUE2 监听页面刷新和关闭事件

开发技术 开发技术 2022-06-13 次浏览

最近想完成一个关闭设备设备页面就释放设备的需求,但是需要首先知道页面是否关闭,再执行一个请求操作,目前chrome对于页面关闭刷新等的权限限制了很多,找了好久找到合适的方法

在vue中的mounted中添加如下方法

mounted: function () {
    let _beforeUnload_time = 0, _unload_time = 0
    // 窗口关闭或刷新时候的操作
    window.addEventListener('beforeunload', (event) => {
        event = window.event
        _beforeUnload_time = new Date().getTime()
        {#// Cancel the event as stated by the standard.#}
        {#event.preventDefault();#}
        {#// Chrome requires returnValue to be set.#}
        {#event.returnValue = '';#}
    });

    window.addEventListener('unload', (event) => {
        _unload_time = new Date().getTime()
        console.log(_unload_time - _beforeUnload_time)
        // 关闭页面通常小于100毫秒
        if (_unload_time - _beforeUnload_time <= 100) {
            //业务代码
            this.stopUsing()
        }
    })}

然后在对应的业务代码地方用自己的函数即可,原理是刷新页面与关闭页面时两个事件的事件间隔不一样,关闭页面通常小于100ms,另外需注意上方有四行注释的代码,如果不注释,就会在关闭和刷新的时候提醒用户是否关闭,而用户的选择时间也会算进去,影响我们两个事件的事件间隔判断,因此注释掉。

 

程序员灯塔
转载请注明原文链接:VUE2 监听页面刷新和关闭事件
喜欢 (0)