js判断页面刷新和关闭 亲测可用

  • A+
所属分类:前端工程

js判断页面刷新和关闭

由于业务需要在页面关闭的时候进行一些设置或者保存一些内容或者发送网络请求。经过很多的测试都不能成功,在网上查看一下博客进行了一些总结,希望可以帮助更多的人。

监听页面使用的函数
window.onload //页面加载时执行
window.onunload //页面关闭时执行
window.onbeforeunload //页面刷新或者关闭时执行

通过查看资料总结对于不同浏览器函数的执行变化

ie/谷歌/360:

页面加载时:只执行onload
页面刷新时:刷新之前执行onbeforeunload,新页面即将替换旧页面时执行onunload,最后onload
页面关闭时:先执行onbeforeunload,然后onunload

火狐

页面刷新时:只执行onunload
页面关闭时:只执行onbeforeunload

  window.onload = function () {
    var _beforeUnload_time = 0, _gap_time = 0;
    var is_fireFox = navigator.userAgent.indexOf("Firefox") > -1;//是否是火狐浏览器
    function ajaxRequest(url, msg, t) {
      $.ajax({
        url: url,
        data: {
          msg: msg,
          time: t,
        },
        type: "POST",
        dataType: "JSON",
        async: false,
        success: function (e) {
          console.log(e)
        }
      });
    }

    window.onunload = function () {
      _gap_time = new Date().getTime() - _beforeUnload_time;
      if (_gap_time <= 200) {
        //浏览器关闭进行关闭连接,若使用ajax请求需要设置为同步请求
        ajaxRequest('test.php', '浏览器关闭', _gap_time);
      } else {
        //浏览器页面刷新重新连接
        ajaxRequest('test.php', '浏览器刷新', _gap_time);
      }
    };
    window.onbeforeunload = function () {
      _beforeUnload_time = new Date().getTime();
      if (is_fireFox) {//火狐关闭执行
        ajaxRequest('test.php', '火狐浏览器关闭', _gap_time)
      }
    }
  }

进行简单的解释一下:由于onbeforeunload先执行,onunload后执行,
我们在onbeforeunload函数中进行变量初始化进行赋值,变量_gap_time是网络请求的时间差,200这个值是根据个人的网络请求速度进行设置的,如果不清楚可以在后台代码中记录一下网络所使用的时间,然后根据自己的具体时间进行设置这个数值。

注意:在使用ajax进行网络请求的时候需要设置为同步请求。

  • 公众号
  • 扫一扫
  • weinxin
  • 打赏
  • 扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: