window.onunload is not working properly in Chrome browser. Can any one help me?

Question

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.

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. — James Allardice, Oct 17 '11 at 13:21
Modern day browsers block most scripts running onunload so the browser is faster. — epascarello, Oct 17 '11 at 13:53
window.onunload = function() { winUnload(); } This is what I want to say..... Its working same as we write as window.onunload = winUnload; — Imran, Oct 17 '11 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? — Imran, Oct 18 '11 at 16:56
Possible duplicate of [Can I pop up a confirmation dialog when the user is closing the window in Safari/Chrome?](http://stackoverflow.com/questions/803887/can-i-pop-up-a-confirmation-dialog-when-the-user-is-closing-the-window-in-safari) — Squazz, Oct 03 '16 at 11:43

Armin · Answer 1 · 2016-08-11T20:35:00.893

60

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/

edited Aug 11 '16 at 20:35

answered Feb 17 '12 at 09:27

Armin

15,582
10
47
64

1

@Armin - nice catch. thank you. i extended your code to not bothering a user on form submission and internal navigation: https://jsfiddle.net/5wyr2u5x/ – Tohid Feb 15 '15 at 10:43
2

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^^ – Armin Nov 15 '16 at 19:36
@Armin is it possible to trigger confirm box only close tab ? – user6016913 Mar 31 '18 at 08:29

score 9 · Answer 2 · edited May 16 '17 at 12:38

9

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

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

edited May 16 '17 at 12:38

theonlygusti

11,032
11
64
119

answered Sep 11 '15 at 17:45

Carlos

377
5
24

3

myFunction() - will be called 2 times! Better only onbeforeunload: ```window.onbeforeunload = (function(){ myFunction() })``` – egor.xyz Mar 05 '17 at 13:34
window.onbeforeunload = myFunction; it's better – Jordi Jordi Sep 23 '18 at 09: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? – sam ruben Sep 19 '19 at 10:48

score 6 · Answer 3 · answered Jun 22 '15 at 16:44

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.

In 2017, this workaround displays a message but not the message that I want so upvotes for giving me something to work with :D — Callat, Apr 23 '17 at 22:40

score 3 · Answer 4 · edited Jan 19 '21 at 12:26

3

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

edited Jan 19 '21 at 12:26

Paolo

20,112
21
72
113

answered Nov 16 '11 at 05:31

Nivedittan

31
1

score 3 · Answer 5 · edited May 23 '17 at 12:10

3

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/

edited May 23 '17 at 12:10

Community

1
1

answered Mar 28 '12 at 14:39

Leonardo Calzavara

86
4

score 2 · Answer 6 · edited May 23 '17 at 12:03

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>.

score 2 · Answer 7 · edited Jun 14 '18 at 21:40

2

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);

edited Jun 14 '18 at 21:40

cela

2,352
3
21
43

answered Mar 07 '16 at 05:04

Amulya Kashyap

2,333
17
25

window.onunload is not working properly in Chrome browser. Can any one help me?

7 Answers7

Linked