Today, the project encountered a problem, there is a feature to open a new window in the main window of the browser, and operational requirements: close the new window when the back end to send a request, do not send a refresh time. Onbeforeunload know that there is an event for capturing close the browser events (including refreshing), but can also go refresh this method, it does not work, then looked to find information on the Internet, most of the roughly like the answer online
= function window.onbeforeunload () {
// horizontal position of the mouse relative to the user's screen - with respect to the horizontal top left corner of the window the upper left corner of the screen in the horizontal position of the mouse = current window
var n = window.event.screenX - window. screenLeft;
// mouse within the current window, n <m, b is false; the mouse outside the current window, n> m, b is true. 20 These values are in close button width
var n-B => document.documentElement.scrollWidth-20;
// client area at the mouse, window.event.clientY> 0; when the mouse outside the client area, window.event. clientY <0
IF (b && window.event.clientY <0 || || window.event.altKey window.event.ctrlKey) {
you want to do when you close the browser //
alert ( "closed");
} the else IF (event.clientY> document.body.clientHeight || event.altKey) {
// do what you want when you refresh the browser
alert ( "refresh");
}
}
However, this approach is off the upper right corner of the browser listener event, I want to be close tabs and refresh event, let's take a close look at several ways to analyze the relevant window
When the page is closed to perform onbeforeunload, then onunload
first execution onbeforeunload refresh the page, then onunload, last onload.
From the above analysis, it was found close to the refresh will go onbeforeunload and onunload, if we think that with these two methods can not distinguish between closed and refresh event, it would be wrong, because with closed refresh event will go onbeforeunload and onunload so we use a key point will be able to distinguish between the two, that is: the time difference
The final solution
var beginTime = 0; // start time of execution onbeforeunload
var differTime = 0; // time difference between
the window.onunload = function () {
differTime new new = a Date () the getTime () - beginTime;.
IF (differTime <=. 5 ) {
console.log ( "the browser is closed")
$ .ajax ({
of the type: "POST",
url: url,
dataType: "JSON",
Cache: false,
Success: function (msg) {
console.log (msg) ;
},
error: function (ERR) {
the console.log (ERR)
}
})
} {the else
the console.log ( "browser refresh")
}
}
Window.onbeforeunload = function () {
beginTime = new new a Date () getTime ();.
};
Analysis: Although the refresh will go on and off onbeforeunload and onunload, but probably because refresh the page before loading the new internal mechanisms need to do some preparation work, so refreshing event in the implementation of the onunload event, a time will be longer than the closed event time, in my test page, the page which lacks content, closed onbeforeunload and onunload time difference generally within 3 milliseconds, time difference refresh event will normally be more than 10 milliseconds, when I actually used in the project when the (real project page there is a lot of content a), refresh time event of poor escape of around 100 milliseconds, while the closing event time difference is 3 about milliseconds, which greatly ensure the accuracy of this method, therefore, to determine the browser window or tab is closed and refreshing, this method is more appropriate.
---------------------
Author: Weixing
Source: CSDN
Original: https: //blog.csdn.net/itlsq/article/details/81095323
Copyright: This article is a blogger original article, reproduced, please attach Bowen link!