Methods onunload and onbeforeunload do not work

Question

Methods onunload and onbeforeunload do not work

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

Based on this response I would like that when the user closes (or update) received an alert saying Tchau , but only when I enter the page does it tell me Olá , when I update or close the tab, it does not say Tchau .

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
</html>

<script type="text/javascript">
    window.onload = function(){alert('Olá')};
    window.onbeforeunload = function(){alert('Tchau')};
    window.onunload = function(){alert('Tchau')};
</script>

Remembering that I've tried it that way too

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
</html>

<script type="text/javascript">
    window.onload = function(){alert('Olá')}
    window.onbeforeunload = function(){return 'Tchau';}
    window.onunload = function(){return 'Tchau';}
</script>

javascript

asked by anonymous 28.12.2017 / 01:42

2 answers

1

I've mentioned this a few times:

To summarize the answers, onunload and onbeforeunload do not serve to detect when the person leaves the site, what he does is detect the download , that is, a link from the same site will trigger the event, pressing F5 will trigger the event, if you use Back or Forward will trigger the event.

If you want to use it, it is necessary to first understand some things, when unload or beforeunload occurs the page is already preprocessed to destroy / unload and therefore new windows / GUIs will not be generated.

That is, alert() , confirm() , prompt() and window.open() will not run, even if you wish, this is explained in the W3C specification link

note: alert / confirm and others are also ignored in event pagehide

Then the only event you should use is beforeunload with return '<string>'; , there is one more problem your HTML is badly marked, this does not affect execution, but it should still be this:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <script>
            //script vai aqui
        </script>
    </body>
</html>

However note that even using:

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

Will not send the desired text , it will just generate a default message asking whether or not to download the page:

Inotherwords,thisisnota"goodbye" message, nor is Tchau displayed, it's a resource to be used on certain occasions, to say goodbye for sure is not a good way to implement this. / p>

Providing a good experience for the user

Say hello, say goodbye, is this really necessary? Does the user not know that they are already leaving or when they have entered the page?

I personally believe that these types of messages sound more like noise than something useful to the user, so much so that for many of these problems certain implementations have been removed from browsers, many more things cause that , again this message ", than to actually appear polite, the user will feel welcome on the site when he gets what he wants from the site, not with a disturbing welcome message that locks everything until it is pressed the ok button.

On the use of beforeunload and unload I have explained, they are not to check when the person leaves the site, and there is no guaranteed way to do this, you can implement anything, detect internal and external links, but this kind of thing is unnecessary work, I personally recommend that you focus on creating a nice interface to navigate so that the user feels good when surfing, so yes he will feel welcome and when he leaves the site he will surely be an hour will want to come back.

What would the utility of beforeunload be?

It would be more interesting if it was used to prevent it from losing editions, or if it is a game to prevent it from leaving without saving the game, for this is exactly what the default message says:

Do you want to leave this site?

It is possible that changes you have made have not been saved

This is his focus today, to prevent the user from accidentally closing something and forfeiting something.

28.12.2017 / 03:23

Txt displays duplicate information Popular combobox within the jtable with database, how to proceed?

score 2 · Accepted Answer

I answered a similar question here .

But for the window.onbeforeunload method it works, you must put return :

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

However, some browsers do not display the return message, but only a confirmation box of their own (if I'm not mistaken, Chrome, Firefox and Opera).

Edit

The onunload method is executed after the window is closed. So it will not display anything. onbeforeunload does something before closing.

View documentation in MDN.

Edit 2

The window.onbeforeunload method will only work if there is any interaction on the page. If the user opens the page and closes it without any interaction, there will be no confirmation.

Edit 3

Instead of making a window.onload , you can create a modal welcome and force the user to click, thereby generating an interaction. See the code test online at this link ):

#tela {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: flex;
    justify-content: center;
}

#aviso{
   width: 300px;
   padding: 20px;
   background-color: #fff;
   border-radius: 10px;
   z-index: 999;
   top: 50%;
   align-self: center;
   text-align: center;
}

<div id="tela">
   <div id="aviso">
      Olá!
      <br /><br />
      <input type="button" value="OK" onclick="document.querySelector('#tela').style.display = 'none';" />
   </div>
</div>