Home >Web Front-end >JS Tutorial >Determine whether the browser is closed or refreshed based on JavaScript (super accurate)_javascript skills

Determine whether the browser is closed or refreshed based on JavaScript (super accurate)_javascript skills

WBOYOriginal: 2016-05-16 15:16:522971browse

This article is some core content summarized by the editor. I personally think it will be helpful to everyone. Please see below for the specific content:

Onload is only executed when the page loads
Only execute onunload
when the page is closed When the page is refreshed, onbeforeunload is executed first, then onunload, and finally onload.

After verification, I came to the conclusion:

//For IE, Google, 360:

//Onload is only executed when the page is loaded
//When the page is refreshed, the onbeforeunload event is executed before the refresh, the onunload event is executed when the new page is about to replace the old page, and finally the onload event is executed.
//When the page is closed, the onbeforeunload event occurs first, and then the onunload event.

//For Firefox:

//When the page is refreshed, only onunload is executed; when the page is closed, only onbeforeunload event is executed
So back to the topic, how to determine whether the browser is closed or refreshed? I have tried hundreds of times according to various opinions on the Internet without success. The various opinions are as follows:

window.onbeforeunload = function() //author: meizz 
{ 
var n = window.event.screenX - window.screenLeft; 
var b = n > document.documentElement.scrollWidth-20; 
if(b && window.event.clientY < 0 || window.event.altKey) 
{ 
alert("是关闭而非刷新"); 
window.event.returnValue = ""; //这里可以放置你想做的操作代码 
}else
{ 
alert("是刷新而非关闭"); 
} 
} 
window.onbeforeunload = function() //author: meizz 
{ 
var n = window.event.screenX - window.screenLeft; 
var b = n > document.documentElement.scrollWidth-20; 
if(b && window.event.clientY < 0 || window.event.altKey) 
{ 
alert("是关闭而非刷新"); 
window.event.returnValue = ""; //这里可以放置你想做的操作代码 
}else
{ 
alert("是刷新而非关闭"); 
} 
}

and

function CloseOpen(event) {
if(event.clientX<=0 && event.clientY<0) {
alert("关闭");
}
else
{
alert("刷新或离开");
}
}
</script>
<body onunload="CloseOpen(event)">

........................

None of these methods worked, but I didn’t give up, thinking and thinking...

According to the above I came to the conclusion,

//For IE, Google, 360:

//For Firefox:

//When the page is refreshed, only onunload is executed; when the page is closed, only onbeforeunload event is executed
When refreshing, first onbeforeunload, and then get the server request data. When the new page is about to replace the old page, the onunload event occurs. When the page is closed, the onbeforeunload event occurs first, and then the onunload event immediately. Then when refreshing, the time between onbeforeunload and onunload is definitely longer than when closing, and this is indeed the case after testing.

Posted my test code:

var _beforeUnload_time = 0, _gap_time = 0;
var is_fireFox = navigator.userAgent.indexOf("Firefox")>-1;//是否是火狐浏览器
window.onunload = function (){
_gap_time = new Date().getTime() - _beforeUnload_time;
if(_gap_time <= 5) 
$.post(pathName+"/back/bi!aaaa.s2&#63;t="+_beforeUnload_time,{msg:"浏览器关闭",time:_gap_time},function(json){},"text");
else 
$.post(pathName+"/back/bi!aaaa.s2&#63;t="+_beforeUnload_time,{msg:"浏览器刷新",time:_gap_time},function(json){},"text");
}
window.onbeforeunload = function (){
_beforeUnload_time = new Date().getTime();
if(is_fireFox)//火狐关闭执行
$.post(pathName+"/back/bi!aaaa.s2&#63;t="+_beforeUnload_time,{msg:"火狐关闭"},function(json){},"text");
};

Server code (SSH implementation):

public void aaaa(){
System.out.println(base.getParameter("msg")+"，间隔："+base.getParameter("time"));
}

For if(_gap_time <= 5), the 5 here is my default, which depends on the client browser and is also related to the client's machine configuration. When my machine closes the browser, the onbeforeunload event is the same as The data interval of the onunload event does not exceed 2ms, and the interval during refresh is 100% greater than 2ms because the server needs to be accessed. My test results are posted below:

The following will introduce the browser to close the listening event and determine whether to refresh or close

Using onunload or onbeforeunload can monitor the browser closing event, but it is impossible to distinguish between closing and refreshing. The following js code can partially monitor the event of closing the browser!

//鼠标相对于用户屏幕的水平位置 - 窗口左上角相对于屏幕左上角的水平位置 = 鼠标在当前窗口上的水平位置
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){
关闭浏览器时你想做的事
}else if(event.clientY > document.body.clientHeight || event.altKey){
关闭浏览器时你想做的事
}

This piece of js can monitor the mouse click on the browser close button, the right click of the mouse on the browser status bar to close the pop-up menu, and various shortcut keys. However, double-clicking the icon in the upper corner of the browser to close the browser and close the tab cannot be monitored.

The above is the entire content of this article. If it is not well written, please give me your valuable opinions.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：This mechanism in JavaScript_Basic knowledgeNext article：This mechanism in JavaScript_Basic knowledge

See more

Determine whether the browser is closed or refreshed based on JavaScript (super accurate)_javascript skills

Related articles