Javascript onload and onunload

Question

Consider the following HTML snippet containing some javascript utilizing prompt and unload. The prompt() method works fine but I want alerting something like Goodbye, user when reloading or leaving the page. Any help is greatly appreciated.

<body onload="promptName()" >


        <script type="text/javascript">
        function promptName()
        {
            var userName = prompt("What's your name ?", "")
            return userName;
        }

        function goodBye()
        {
            alert("Goodbye, " + promptName() + "!");
        }

        window.onunload = goodBye();

        </script>

  </body>

What browser are you testing against? According to the MDN, onbeforeunload behaves differently in different browsers: https://developer.mozilla.org/en/DOM/window.onbeforeunload — Levi Hackwith, Mar 28 '12 at 12:54

score 16 · Accepted Answer · answered Mar 28 '12 at 12:53

You should write it like this:

window.onunload = goodBye;

Also, you might consider using the onbeforeunload event in some browsers:

window.onbeforeunload = goodBye;

When you write window.onunload = goodBye(); you assign whatever handler that is returned from goodBye to the unload event. Since nothing is returned, there will be no event handler. You need to reference the function instead: window.onunload = goodBye;

score 4 · Answer 2 · answered Mar 28 '12 at 12:59

4

You can't assing this way: window.onunload = goodBye();

If you want to assing this way you have three ways:

// by this way you use the name of the function, so you override the onunload function with goodBye function
window.onunload = goodBye;

or

  // This way you redefine the function
    window.onunload = function(){goodBye()};

And my favourite because it allows you to add more functionality:

// This way you create a event listener which allows you to add as many functions as you ant
window.addEventListener("unload", goodBye, false);

answered Mar 28 '12 at 12:59

Javier Cobos

1,172
10
22

Just a note: The last example will break IE versions below 9. – David Hellsing Mar 28 '12 at 13:00
`addEventListener` is not avail in IE8- – David Hellsing Mar 29 '12 at 08:26
what in my example is not available in IE8? – Javier Cobos Mar 29 '12 at 08:34
I’m not sure I can explain it better than my previous comment. https://developer.mozilla.org/en/DOM/element.addEventListener#Legacy_Internet_Explorer_and_attachEvent – David Hellsing Mar 29 '12 at 09:26

PraveenVenu · Answer 3 · 2012-03-28T12:57:44.780

1

<body onload="promptName()" >


        <script type="text/javascript">
        function promptName()
        {
            var userName = prompt("What's your name ?", "")
            return userName;
        }



        window.onbeforeunload = function() {
    alert("Goodbye, " + promptName() + "!");
}
        </script>

  </body>

onbeforeunload

edited Mar 28 '12 at 12:57

answered Mar 28 '12 at 12:51

PraveenVenu

8,217
4
30
39

But it gives goodbye message just after prompting the name; I want this goodbye message after F5 or clicking close icon – George Mar 28 '12 at 12:52
@George see my answer, you should reference the function, not execute it. – David Hellsing Mar 28 '12 at 12:55

score 1 · Answer 4 · answered Mar 28 '12 at 12:53

As seen HERE

window.onbeforeunload = function() {
    alert("Goodbye, " + promptName() + "!");
};

or

window.onbeforeunload = goodBye;

Although I would suggest saving the username to a glob by seting a var outside you load func that receives the username after first prompt, then you dont have to prompt them for their name again when they leave

score 1 · Answer 5 · edited Mar 24 '15 at 11:50

1

You could do something like this:

var userName = ""; 

function promptName()
{
    userName = prompt("What's your name ?", "")
    return userName;
}

function goodBye()
{
   alert("Goodbye, " + userName  + "!");
}

window.onload=promptName();     
window.onbeforeunload = goodBye();

edited Mar 24 '15 at 11:50

answered Mar 28 '12 at 12:58

hennson

741
4
7

prompt works fine, problem is that I want goodbye message after clicking close button. This code gives goodbye message just after prompt no matter of onunload() or onbeforeunload() – George Mar 28 '12 at 13:06
it was just to show you the event. you have to change your code like this function goodBye() { return ("Goodbye, " + userName + "!"); } – hennson Mar 28 '12 at 13:31

score 0 · Answer 6 · answered Oct 23 '17 at 20:57

This works for me, but the accepted answer doesn't. This also supports more browser events.

This can also be used together with various onbeforeunload and beforeunload scripts.

var doOnUnload = window.attachEvent || window.addEventListener;
var eventType = window.attachEvent ? 'onunload' : 'unload';

doOnUnload(eventType, function(e) 
{
    console.log('godbye');
});

Javascript onload and onunload

6 Answers6

Linked