window.onunload is not working properly in Chrome

Asked 17/10, 2011 at 13:15 Answered 7/3, 2016 at 5:4

javascript browser onunload window.onunload

I have written this code

function winUnload() {
    alert("Unload Window");
    MyMethod();
}

window.onunload = function() { winUnload(); }

This code is working fine in IE and Firefox. But this code is not working in Chrome. Both the statements alert("Unload Window"); and MyMethod(); are not working.

Selfconfidence answered 17/10, 2011 at 13:15 Comment(6)

On Chrome, if I put an alert in an unload event handler, the console tells me "Blocked alert('something') during unload.". But if you do what Pointy has already mentioned, the call to MyMethod should work. – Lythraceous 17/10, 2011 at 13:21

Modern day browsers block most scripts running onunload so the browser is faster. – Burch 17/10, 2011 at 13:53

window.onunload = function() { winUnload(); } This is what I want to say..... Its working same as we write as window.onunload = winUnload; – Selfconfidence 17/10, 2011 at 14:27

Actually I wants to save my forms values in database if user leave the page without showing him any message (alert). I am using asp.net c# mvc 1. Is there any other way to do this work? – Selfconfidence 18/10, 2011 at 16:56

Try: <body onunload="unload()"> – Boarer 14/9, 2016 at 6:39

Possible duplicate of Can I pop up a confirmation dialog when the user is closing the window in Safari/Chrome? – Accusal 3/10, 2016 at 11:43

There are some actions which are not working in chrome, inside of the unload event. Alert or confirm boxes are such things.

But what is possible (AFAIK):

Open popups (with window.open) - but this will just work, if the popup blocker is disabled for your site
Return a simple string (in beforeunload event), which triggers a confirm box, which asks the user if s/he want to leave the page.

Example for #2:

$(window).on('beforeunload', function() {
    return 'Your own message goes here...';
});

Demo: http://jsfiddle.net/PQz5k/

Scorpio answered 17/2, 2012 at 9:27 Comment(3)

@Scorpio - nice catch. thank you. i extended your code to not bothering a user on form submission and internal navigation: jsfiddle.net/5wyr2u5x – Esparza 15/2, 2015 at 10:43

In latest Chrome I've recognized that the message is not individual anymore. It says "There are unsaved changes on the page, do you really want to leave?". I've got the message in German, so I've translated it freely^^ – Scorpio 15/11, 2016 at 19:36

@Scorpio is it possible to trigger confirm box only close tab ? – Extractor 31/3, 2018 at 8:29

I know this is old but I found the way to make unload work using Chrome

window.onbeforeunload = function () {
  myFunction();
};

Aklog answered 11/9, 2015 at 17:45 Comment(3)

myFunction() - will be called 2 times! Better only onbeforeunload: window.onbeforeunload = (function(){ myFunction() }) – Disaccredit 5/3, 2017 at 13:34

window.onbeforeunload = myFunction; it's better – Downs 23/9, 2018 at 9:51

Function inside the onbeforeunload calls first time when page refresh/page loads.If i refresh the page again, It don't trigger. Where i missed? – Caithness 19/9, 2019 at 10:48

Armin's answer is so useful, thank you. #2 is what's most important to know when trying to set up unload events that work in most browsers: you cannot alert() or confirm(), but returning a string will generate a confirm modal.

But I found that even with just returning a string, I had some cross-browser issues specific to Mootools (using version 1.4.5 in this instance). This Mootools-specific implementation worked great in Firefox, but did not result in a confirm popup in Chrome or Safari:

window.addEvent("beforeunload", function() {
    return "Are you sure you want to leave this page?";
});

So in order to get my onbeforeonload event to work across browsers, I had to use the JavaScript native call:

window.onbeforeunload = function() {
    return "Are you sure you want to leave this page?";
}

Not sure why this is the case, or if it's been fixed in later versions of Mootools.

Nagoya answered 22/6, 2015 at 16:44 Comment(1)

In 2017, this workaround displays a message but not the message that I want so upvotes for giving me something to work with :D – Haw 23/4, 2017 at 22:40

Please try window.onbeforeunload instead for window.onunload for chrome. You can also try calling onbeforeunload from the body> tag which might work in chrome.

However, we do have a problem with unload function in chrome browser. please check

location.href does not work in chrome when called through the body/window unload event

Abernethy answered 16/11, 2011 at 5:31 Comment(0)

You may try to use pagehide event for Chrome and Safari.

Check these links:

How to detect browser support for pageShow and pageHide?

http://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/

Christlike answered 28/3, 2012 at 14:39 Comment(0)

The onunload event won't fire if the onload event did not fire. Unfortunately the onload event waits for all binary content (e.g. images) to load, and inline scripts run before the onload event fires. DOMContentLoaded fires when the page is visible, before onload does. And it is now standard in HTML 5, and you can test for browser support but note this requires the <!DOCTYPE html> (at least in Chrome). However, I can not find a corresponding event for unloading the DOM. And such a hypothetical event might not work because some browsers may keep the DOM around to perform the "restore tab" feature.

The only potential solution I found so far is the Page Visibility API, which appears to require the <!DOCTYPE html>.

Paigepaik answered 3/3, 2013 at 20:35 Comment(0)

This works :

var unloadEvent = function (e) {
    var confirmationMessage = "Warning: Leaving this page will result in any unsaved data being lost. Are you sure you wish to continue?";
    (e || window.event).returnValue = confirmationMessage; //Gecko + IE
    return confirmationMessage; //Webkit, Safari, Chrome etc.
};
window.addEventListener("beforeunload", unloadEvent);

Rodarte answered 7/3, 2016 at 5:4 Comment(0)

Recommended topics

Hot tags