VUE 中如何区分是刷新页面还是关闭页面

知识点

浏览器关闭执行的是 beforeunload , unload 这两个事件;
而浏览器刷新执行的是beforeunload, unload, load 三个事件;

思路

虽然刷新与关闭都会走onbeforeunload与onunload,但可能因为刷新在加载新页面前内部机制还需要做一些准备工作,所以刷新事件在执行到onunload事件时,用的时间会比关闭事件时间长。

所以,通过时间差来判断浏览器是刷新还是关闭,浏览器执行beforeunload的时候给一个开始时间,执行unload的时候给一个结束时间;判断一下时间差;我设置的是5毫秒来区分浏览器的关闭和刷新,具体的时间最好还是亲自测一下;

代码

 mounted() {
    let beginTime = 0; //开始时间
    let differTime = 0; //时间差
    window.onunload = function () {
      differTime = new Date().getTime() - beginTime;
      if (differTime <= 5) {
        console.log("这是关闭");
      } else {
        console.log("这是刷新");
      }
    };

    window.onbeforeunload = function () {
      beginTime = new Date().getTime();
    };
  },
};

本人亲测有效

原文链接:https://blog.csdn.net/weixin_46366749/article/details/111221076
作者:浩星

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容