Develop Reference

Popstate not triggering on Chrome for Android when clicking the back button

Upon clicking the back button in the browser, I would like to prevent the default behaviour of going one page back and instead do an action. I'm using the "popstate" event listener. The following function (I'm using Vue 2) works in all major browsers and even in Firefox for Android, but when I test it in Chrome for Android, it simply goes back one page without popstate being triggered at all.
mounted() {
history.pushState(null, null, <current-url>);
window.addEventListener("popstate", () => { alert(1) });
}
I tried wrapping the popstate event inside the load event and giving it a timeOut of 0, but it still didn't work specifically in Chrome for Android. The version I'm testing on is 93.

I did some more research and it seems that Chrome won't let you use popstate if there is no user interaction first. As long as you click on something or scroll down on mobile, popsate will work, otherwise it won't. I tried to simulate user interaction with click(), but that didn't work either. It seems Chrome wants genuine user interaction. I also realized this is sort of a duplicate of: Chrome popstate not firing on Back Button if no user interaction

Check if user is leaving the page js

I tried onbeforeunload event but it's not working when leaving the page it's only working when I reload but every thing works fine on edge.
I think Chrome have changed somethings in configuration.
Is there a way to fix that or another method?
onbeforeunload = function(){
return("bye");
}
AND is there a way I can check if user is closing the page or redirecting to another url with out firing on reloading or can I not do that?

Even when using JQuery, a framework with the objective cross browser compatibility, they say:
The exact handling of the unload event has varied from version to version of browsers. For example, some versions of Firefox trigger the event when a link is followed, but not when the window is closed. In practical usage, behavior should be tested on all supported browsers and contrasted with the similar beforeunload event.
Source
So you have to accept an inconsistent behaviour.

You could try doing this:
window.onbeforeunload = function(e) {
return "Bye";
}
As you need to attach the event to the window

How to use JS detect user close page on Safari

I want to detect user close my page using js, in Chrome/Firefox I use onbeforeunload event, but in Safari (on macOS and iOS) it doesn't work (but MDN say It work...)
In Safari on macOS, onbeforeunload only work first time refresh/close page.
I try unload, beforeunload, pagehide also not work.

Please try the following.
window.unload = function ()
{
// add code here
};
Here is some documentation https://www.w3.org/TR/DOM-Level-2-Events/events.html

Why is jQuery unload not working in chrome and safari?

unload function in jQuery works fine in Firefox but not in chrome and safari. please check this fiddle in chrome and Firefox. http://jsfiddle.net/jeevankk/Gywnw/2/ . Alerts a message when the page is refreshed.
$(window).unload(function() {
alert("Unload");
});​

This should work to show a confirmation when the users leaves, this is also not part of any standard.
$(window).on('beforeunload ',function() {
return 'Are you sure ?';
});

I found Joseph's comment as the correct answer, So posting this answer.
Dialogs are blocked/prevented during "beforeunload" (with exception to the beforeunload prompt) and "unload" events. Can be confirmed by checking your console.

This is because the unload event is not part of any standard
https://developer.mozilla.org/en/DOM/window.onunload
check the bottom of the page i just linked to.

jQuery's unload works well in chrome too, with the exception that Chrome doesn't allow alerts within it. I've used it to set cookies. And if it works with Chrome hope it works in Safari too.

the unload function of jquery has some problem with browsers..refer the following link
http://bugs.jquery.com/ticket/5538
can you elaborate on the problem so that we can find some work around??

you can use onfocusout on the body .. but i wouldn't recommend if you are trying to use something like an alert, on this operation, asking the user not to leave your page ..

"refresh" action in the Firefox does not fire the unload event.
We should use onbeforeunload instead.
Confirm with Firefox version 47, Mac OS X

onbeforeunload in safari does not run code server side

On browser close or F5, I have to perform some code on server side
For this I have a button. On click of that button which has onclientclick and onclick functions written. I also wrote an event on window.onbeforeunload which does a button.click().
window.onbeforeunload=function(e)
{
button.click()
}
My problem is that this runs the code of the client side click function of the button, however server side code does not get executed. This happens only when i close the browser. When I do F5 it works perfectly. Also this happens only on Safari. In FF and mozila it works perfectly . How can i

Safari does not allow or execute asynchronous AJAX requests in beforeunload events, so it might very well be that your code is executed but that the requests are never issued to the server. Synchronous AJAX requests are executed, so use those in the beforeunload handler.

There is probably a speed issue, the button gets clicked but the response isn't being sent to the server fast enough, so the browser closes before it can be sent.
If you need to, you can always throw up a prompt to slow the closing of the window down, but this is very unfriendly.

as a curiosity, The problem here is taht Safari does not recognize the onbeforeunload event... therefore any code there will not be run in Safari.
You could use onunload event but here you will never be able to prevent the page from closing