beforeunload
is not used to detect when tabs close or windows close is used to detect the "download" of the page, ie this event is triggered also when you click on a link that goes to another page, since the current page will be downloaded in order to load the new one.
Important: You can not detect the difference of "trusted way" if closing or paging in beforeunload
event.
What you can do is to use Ajax pageing and history.pushState
to change the URL, rather than actual pageings, however the use of beforeunload
with ajax is also problematic when closing tabs and windows, read follow.
Because it is not recommended to use beforeunload
Note a very important thing , I do not recommend using beforeunload
to detect that the page closed, as this can not be guaranteed, due to the following problems that the ajax request can not be delivered to the server:
- When closing a tab or window all ajax requests are canceled
- The browser may freeze or close because of a crash, so ajax will never be fired.
- For some reason the computer suddenly shut down, for example a power outage
Alternative to beforeunload
As I said in these two links:
I recommend creating a timer (just like Google does, as I mentioned in the first link), ie nobody uses beforeunload
because it does not is a good practice for this specific purpose.
The timer should be created on the server side and will depend on the language it uses (in your case it is PHP), an example I already mentioned in the link above would be to create a table: p>
id | login | senha | nome | lastactive
-----------------------------------------------
1 | test | test | João | 2015-06-24 01:00:23
-----------------------------------------------
2 | maria | maria | Maria| 2015-06-24 01:00:33
Assuming I am the ID 1 user (you must use session) you would have to execute this command on every "my" request (using php and mysqli or pdo):
UPDATE usuarios SET lastactive=CURRENT_TIMESTAMP WHERE id=1
And to check users online:
define('REQUEST_TIME', $_SERVER['REQUEST_TIME']);
define('TIME_ONLINE', 120);//120 = 2 minutos
function isOnline($timer) {
return REQUEST_TIME - strtotime($timer) > TIME_ONLINE;
}
$query = 'SELECT nome, lastactive WHERE 1 ORDER by nome';
if ($result = $mysqli->query($query)) {
while ($row = $result->fetch_assoc()) {
echo 'Usuário ', $row['nome'], ' está ',
(isOnline($row['lastactive']) ? 'online' : 'offline'), '<br>';
}
$result->free();
}
They are just snippets of code to understand logic. Read the link for more details: Verify User Closed Browser
What is the use of beforeunload
This event was created to be able to perform functions that are focused on interactions with the front end (that is, it will hardly work well with ajax because of the factors already mentioned), such as preventing the user accidentally closing a page that needs to be open , as an online game, use example:
window.onbeforeunload = function() {
return "Gostaria mesmo de sair desta página?";
};
When you try to close the window or change pages, a two-button alert and your message will appear:
Documentation:
link