window.onbeforeunload not working in chrome

Question

This is the code which i used for window.onbeforeunload

<head>
<script>

    window.onbeforeunload = func;
    
    function func() 
    {
        var request = new XMLHttpRequest();
        request.open("POST", "exit.php", true); 
        request.onreadystatechange = stateChanged;
        request.send(null);
    }
    function stateChanged()
    {
        if (request.readyState == 4 || request.readyState == "complete")
            alert("Succes!");
    }
    </script>
</head>

this works with IE and Mozilla but does not work with Chrome..... please help...... thanks in advance.....

See http://stackoverflow.com/questions/7389554/crossbrowser-onbeforeunload — powtac, Mar 08 '12 at 22:47

score 21 · Answer 1 · edited Mar 13 '18 at 10:37

21

It seems that the only thing you can do with onbeforeunload in recent version of Chrome is to set the warning message.

window.onbeforeunload = function () {
    return "Are you sure";
};

Will work. Other code in the function seems to be ignored by Chrome

UPDATE: As of Chrome V51, the returned string will be ignored and a default message shown instead.

edited Mar 13 '18 at 10:37

James McCormack

9,217
3
47
57

answered Feb 23 '12 at 11:05

LapinLove404

1,939
1
21
26

4

Still true today, with Chrome Version 24.0.1312.57 m. Please also note, that you can't check for browser version and throw a different message to the user... if you place the `return "are you sure";` inside an `if` statement, Chrome ignores that too. – Sablefoste Jan 31 '13 at 20:49
1

What if you place `window.onbeforeunload = function () { return "Are you sure"; };` inside the if ? – LapinLove404 Feb 11 '13 at 16:00
Help me out... how/when would you execute the if? On document load? – Sablefoste Feb 11 '13 at 16:38
Yes. Or if you site is generated dynamically (PHP or other language) you could probably inject the script with onbeforeunload only when the bvrowser is not Chrome. – LapinLove404 Feb 26 '13 at 10:13

score 13 · Answer 2 · answered Jun 30 '16 at 17:28

Know I'm late to this, but was scratching my head why my custom beforeunload message wasn't working in Chrome and was reading this. So in case anyone else does the same, Chrome from Version 51 onwards no longer supports custom messages on beforeunload. Apparently it's because the feature has been misused by various scams. Instead you get a predefined Chrome message which may or may not suit your purposes. More details at:

https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove-custom-messages-in-onbeforeload-dialogs

Personally do not think the message they've chosen is a great one as it mentions leaving the site and one of the most common legitimate uses for onbeforeunload is for dirty flag processing/checking on a web form so it's not a great wording as a lot of the time the user will still be on your site, just have clicked the cancel or reload button by mistake.

Richard · Answer 3 · 2018-11-23T05:24:55.950

You should try this:

window.onbeforeunload = function(e) {
  e.returnValue = 'onbeforeunload';
  return 'onbeforeunload';
};

This works on latest Chrome. We had the same issue the e.returnValue with value of onbeforeunload solved my problem.

Your code should be like this:

    <head>
    <script>

    window.onbeforeunload = function(e) {
        e.returnValue = 'onbeforeunload';
        func();
        return ''onbeforeunload'';
    };

    function func() 
    {
        var request = new XMLHttpRequest();
        request.open("POST", "exit.php", true); 
        request.onreadystatechange = stateChanged;
        request.send(null);
    }
    function stateChanged()
    {
        if (request.readyState == 4 || request.readyState == "complete")
            alert("Succes!");
    }
    </script>
    </head>

score 4 · Answer 4 · answered Aug 18 '12 at 14:38

Confirmed this behavior on chrome 21.0.1180.79

this seems to work with the same restritions as XSS, if you are refreshing the page or open a page on same domain+port the the script is executed, otherwise it will only be executed if you are returning a string (or similar) and a dialog will be shown asking the user if he wants to leans or stay in the page.

this is an incredible stupid thing to do, because onunload/onbeforeunload are not only used to ask/prevent page changes.

In my case i was using it too save some changes done during page edition and i dont want to prevent the user from changing the page (at least chrome should respect a returning true or change the page without the asking if the return is not a string), script running time restrictions would be enought.

This is specially annoying in chrome because onblur event is not sent to editing elements when unloading a page, chrome simply igores the curent page and jumps to another. So the only change of saving the changes was the unload process and it now can't be done without the STUPID question if the user wants to change it... of course he wants and I didnt want to prevent that...

hope chrome resolves this in a more elegant way soon.

What would you suggest to have an exit animation added to an element then instead of window.onbeforeunload? — Tyler Lazenby, Mar 19 '15 at 19:50

score 3 · Answer 5 · answered Sep 30 '15 at 02:25

3

Try this, it worked for me:

window.onbeforeunload = function(event) {
    event.returnValue = "Write something clever here..";
};

answered Sep 30 '15 at 02:25

harisrozak

101
4

this worked fine for me and I could also add code (empty some local storage stuff) to be executed before the event.returnValue . one improvement could to register the onbeforeunload event as lined out by https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload window.addEventListener('beforeunload', function(e) { ... – pellekrogholt Mar 01 '16 at 14:27

Bakudan · Answer 6 · 2012-06-26T10:55:42.840

1

Try this. I've tried it and it works. Interesting but the Succes message doesn`t need confirmation like the other message.

window.onbeforeunload = function() 
{
    if ( window.XMLHttpRequest )
    {
        console.log("before"); //alert("before");
        var request = new XMLHttpRequest();
        request.open("POST", "exit.php", true); 
        request.onreadystatechange = function () {
            if ( request.readyState == 4 && request.status == 200 )
            {
                console.log("Succes!"); //alert("Succes!");
            }
        };
        request.send();
    }
}

edited Jun 26 '12 at 10:55

answered Feb 06 '11 at 11:02

Bakudan

19,134
9
53
73

2

You can't do an alert. Since the JavaScript engine will not allow you to execute any blocking script. – Robin Maben Jun 26 '12 at 09:48

score 1 · Answer 7 · edited Jul 18 '19 at 20:47

None of the above worked for me. I was sending a message from the content script -> background script in the before unload event function. What did work was when I set persistent to true (in fact you can just remove the line altogether) in the manifest:

"background": {
    "scripts": [
        "background.js"
    ],
    "persistent": true
  },

The logic is explained at this SO question here.

score 0 · Answer 8 · answered Mar 06 '16 at 23:20

Current versions of Chrome require setting the event's returnValue property. Simply returning a string from the event handler won't trigger the alert.

addEventListener('beforeunload', function(event) {
  event.returnValue = 'You have unsaved changes.';
});

score 0 · Answer 9 · answered Jul 18 '18 at 14:36

I'm running Chrome on MacOS High Sierra and have an Angular 6 project whithin I handle the window.beforeunload an window.onbeforeunload events. You can do that, it's worked for me :

handleUnload(event) {
  // Chrome
  event.returnValue = true;
}

It show me an error when I try to put a string in event.returnValue, it want a boolean.

score 0 · Answer 10 · answered May 14 '21 at 07:04

Don't know if it allows custom messages to display on the browser.

<script type="text/javascript">
    window.addEventListener("beforeunload", function(e) {
        e.preventDefault(); // firefox
        e.returnValue = ''; // Chrome
    });
</script>

user1779049 · Answer 11 · 2023-05-09T13:10:53.710

window.onbeforeunload = function(e) {
  e.returnValue = 'Any message';
  return afunc();
};

function afunc() {
   // do your asynchronous stuffs, in my case $ajax(...)
}

Still work in Chrome 113, specifically should put a function at the last line of code block after keyword 'return' (I put afunc() instead of typical pattern, a custom message), where code inside this function should do your asynchronous stuffs in order to avoid a dismissal something exception and subsequently the rest of your code block will not be executed.

window.onbeforeunload not working in chrome

11 Answers11

Linked

Related