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();
    };
  },
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值