页面加载时只执行onload

页面关闭时只执行onunload

页面刷新时先执行onbeforeunload,然后onunload,最后onload。这样可以在onbeforeunload中获取时间戳,在onunload中判断时间戳,即可达到判断页面是否真的关闭了。

  • 注意的是当在你按着f5不动的情况下,onbeforeunload与onunload的时间差也会小于5,从而执行了关闭页面的代码
mounted() {
    // 数据变动时
    window.addEventListener('beforeunload', (e) => this.beforeunloadHandler(e));
    window.addEventListener('unload', (e) => this.unloadHandler(e));
},
methods: {
    // 方法
    beforeunloadHandler(event) {
        this.beforeUnloadTime = new Date().getTime();
        console.log('this.beforeUnloadTime', this.beforeUnloadTime);
        event = event || window.event;
        console.log(event);
        if (event) {
            event.returnValue = '关闭提示';
        }
        return '关闭提示'; // 新版的浏览中,已经不支持自定义弹窗。只能调用浏览器自带的提示确认窗格
    },
    unloadHandler() {
        console.log('this.beforeUnloadTime--', this.beforeUnloadTime);
        console.log(new Date().getTime() - this.beforeUnloadTime);
        let time = new Date().getTime() - this.beforeUnloadTime;
        if (time <= 5) {
            localStorage.setItem('close', 1); // 关闭
        } else {
            localStorage.setItem('Refresh', 2); // 刷新
        }
    }
},
beforeDestroy() {
    // 销毁之前
    window.removeEventListener('beforeunload', (e) => this.beforeunloadHandler(e));
    window.removeEventListener('unload', (e) => this.unloadHandler(e));
}

注意:实际测试页面关闭也执行了onbeforeunload,只能用时间戳长短比较。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐