Javascript onload and onunload

D

6

7

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>

Dashtilut answered 28/3, 2012 at 12:49 Comment(1)

What browser are you testing against? According to the MDN, onbeforeunload behaves differently in different browsers: developer.mozilla.org/en/DOM/window.onbeforeunload – Enamour 28/3, 2012 at 12:54

E

17

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;

Eliath answered 28/3, 2012 at 12:53 Comment(0)

A

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

Aviate answered 28/3, 2012 at 12:59 Comment(4)

Just a note: The last example will break IE versions below 9. – Eliath 28/3, 2012 at 13:0

addEventListener is not avail in IE8- – Eliath 29/3, 2012 at 8:26

what in my example is not available in IE8? – Aviate 29/3, 2012 at 8:34

I’m not sure I can explain it better than my previous comment. developer.mozilla.org/en/DOM/… – Eliath 29/3, 2012 at 9:26

S

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

Sears answered 28/3, 2012 at 12:51 Comment(2)

But it gives goodbye message just after prompting the name; I want this goodbye message after F5 or clicking close icon – Dashtilut 28/3, 2012 at 12:52

@Dashtilut see my answer, you should reference the function, not execute it. – Eliath 28/3, 2012 at 12:55

I

1

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

Inexorable answered 28/3, 2012 at 12:53 Comment(0)

B

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

Brachio answered 28/3, 2012 at 12:58 Comment(2)

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() – Dashtilut 28/3, 2012 at 13:6

it was just to show you the event. you have to change your code like this function goodBye() { return ("Goodbye, " + userName + "!"); } – Brachio 28/3, 2012 at 13:31

K

0

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

Kirkendall answered 23/10, 2017 at 20:57 Comment(0)

Recommended topics

Hot tags