js判断浏览器窗口（选项卡）的关闭与刷新(原版)

Posted 2022-05-05 yansmallkind

今日项目遇到一个问题，有一个功能会在浏览器的主窗口中新开一个窗口，然后业务要求：关闭新窗口的时候往后端发个请求，刷新的时候不发送。知道有个onbeforeunload事件是用于捕获关闭浏览器事件（包括刷新）的，但刷新也会走此方法，所以行不通，于是就网上找了找资料，网上回答的最多的大致是这样的

window.onbeforeunload = function()
//鼠标相对于用户屏幕的水平位置 - 窗口左上角相对于屏幕左上角的水平位置 = 鼠标在当前窗口上的水平位置
var n = window.event.screenX - window.screenLeft;
//鼠标在当前窗口内时，n<m，b为false；鼠标在当前窗口外时，n>m，b为true。20这个值是指关闭按钮的宽度
var b = n > document.documentElement.scrollWidth-20;
//鼠标在客户区内时，window.event.clientY>0；鼠标在客户区外时，window.event.clientY<0
if(b && window.event.clientY < 0 || window.event.altKey || window.event.ctrlKey)
　 　 //关闭浏览器时你想做的事
alert("关闭");
else if(event.clientY > document.body.clientHeight || event.altKey)
　　 //刷新浏览器时你想做的事
alert("刷新");



但是，这个方法是监听浏览器右上角的关闭事件的，我想要的是选项卡的关闭与刷新事件，下面我们先来分析一下关闭窗口相关的几个方法

页面关闭时先执行onbeforeunload，然后onunload
页面刷新时先执行onbeforeunload，然后onunload，最后onload。

从上面的分析中，发现关闭与刷新都会走onbeforeunload与onunload，如果我们认为用这两个方法无法区分关闭与刷新事件，那就大错特错了，正因为关闭与刷新事件都会走onbeforeunload与onunload，所以我们利用了一个关键点就能区分出这两种，那就是：时间差

最终解决方法
var beginTime = 0；//执行onbeforeunload的开始时间
var differTime = 0;//时间差
window.onunload = function ()
differTime = new Date().getTime() - beginTime;
if(differTime <= 5)
console.log("浏览器关闭")
$.ajax(
type: "POST",
url:url,
dataType: "JSON",
cache: false,
success: function(msg)
console.log(msg);
,
error:function(err)
console.log(err)

)
else
console.log("浏览器刷新")

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

分析：虽然刷新与关闭都会走onbeforeunload与onunload，但可能因为刷新在加载新页面前内部机制还需要做一些准备工作，所以刷新事件在执行到onunload事件时，用的时间会比关闭事件时间长，在我的测试页面中，页面里面没啥内容，关闭时onbeforeunload与onunload的时间差一般会在3毫秒内，而刷新事件的时间差一般会在10毫秒以上，当我真正用到项目中的时候（真正的项目页面中就有很多内容了），刷新事件的时间差竟能达到100毫秒左右，而关闭事件时间差还是3毫秒左右，这就大大保证了此方法的准确率，所以，判断浏览器窗口或者说是选项卡的关闭与刷新，此方法是比较合适的。
---------------------
作者：微行
来源：CSDN
原文：https://blog.csdn.net/itlsq/article/details/81095323
版权声明：本文为博主原创文章，转载请附上博文链接！