L'évènement Unload ne marche pas

**binco** · 18/05/2014, 18h27

Bonjour

Je travaille un tuto sur les événements Load et Unload
Pour Load mon codage marche mais l'évènement Unload ne marche pas
Normalement en quittant ma page web (fenêtre) le message2 devrait apparaitre

Avez vous la solution?

Cordialemnt

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<html>
<head>
<script language="Javascript">
function message1 () {alert("Bienvenue sur ce site web");}
function message2 () {alert("A bientot");}
</script>
</head>
<body onLoad="message1()" onUnload="message2()">
</body>
</html>

**thelvin** · 18/05/2014, 20h35

L'utilisateur a exprimé l'envie de quitter la page... Il veut pas qu'une pop-up le retienne !
Tu pourrais utiliser console.log() pour vérifier que l'évènement est bien appelé. On doit aussi pouvoir s'en servir pour enregistrer des données de la page dans les cookies ou localStorage.

**iakou** · 19/05/2014, 08h51

Bonjour.

Il me semble que onunload signifie "au déchargement", ce qui sous entend que la page n'est déjà plus là, et qu'elle ne peut plus rien faire !
Essayez onbeforeunload qui permet à la transaction de "remuer encore un peu" avant de mourir...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script language="JavaScript">
function confirmExit()
     {
     return "A bientôt" ;
     }
window.onbeforeunload = confirmExit;
</script>

**thelvin** · 19/05/2014, 09h28

Envoyé par iakou

Il me semble que onunload signifie "au déchargement", ce qui sous entend que la page n'est déjà plus là, et qu'elle ne peut plus rien faire !

... Dans ce cas-là, à quoi servirait-il que onunload existe et veuille dire quelque chose -_-° ?
Il y a simplement des limitations, c'est tout. Il y en a aussi dans onbeforeunload, bien que lui permette de demander une ultime confirmation (selon des règles très précises.)

**Bovino** · 19/05/2014, 09h43

Envoyé par iakou

Il me semble que onunload signifie "au déchargement", ce qui sous entend que la page n'est déjà plus là, et qu'elle ne peut plus rien faire !

Ah... pourtant

Envoyé par MDN

The unload event is raised when the window is unloading its content and resources. The resources removal is processed after the unload event occurs.

**iakou** · 19/05/2014, 17h01

Bonjour.

Pour déclencher l'évènement onunload, sur le code tel que "binco" l'a écrit, il faut bien faire un click sur la croix !
Cela empêche l'exécution de message_2 puisque vous quittez le navire !... (quelquesoit le navigateur)

PARTICULARITE :

Le même code fonctionnera cependant sous IE mais en utilisant le refresh.
Curieusement IE va d'abord "exécuter" message_2, puis recharger la page et par conséquent "exécuter" message_1.

**thelvin** · 19/05/2014, 17h17

Envoyé par iakou

Pour déclencher l'évènement onunload, sur le code tel que "binco" l'a écrit, il faut faire faire un click sur la croix !

Ou quitter la page de n'importe quelle autre façon.

Envoyé par iakou

Cela empêche l'exécution de message2 puisque vous quittez le navire !... (quelquesoit le navigateur)

Tu ne fais que répéter ce que tu as déjà dit. Bovino et moi t'avons chacun exposé une contradiction devant cette théorie. Pourquoi n'y réponds-tu pas, au lieu de te répéter ?

... Enfin c'est inutile, le fait est que tu as tort, mais tu pourrais tout de même éviter d'insister.

**iakou** · 19/05/2014, 17h45

J'ai peut-être tort mais montrez moi mon erreur !

Je ne parle que du code de 'binco' au sens strict : Pour quitter sa page telle qu'il l'a écrite il faut faire un "click croix" ! Il n'y a pas de lien, par conséquent je ne vois pas d'autre porte de sortie. (Ah si, on peut éteindre l'ordi...)

Quand au refresh, ce n'est pas vraiment une porte de sortie. Et puis je vous ai dit ce que j'ai constaté sour IE...

PS : Je voulais simplement aider binco. J'ai pris le temps de copier son code et de le tester sous 4 navigateurs, mon but étant de partager ce à quoi j'avais déjà été confronté par le passé.
Maintenant si on n'a plus le droit à la parole, le forum ne sert plus à grand chose...

**thelvin** · 19/05/2014, 18h02

On peut taper une autre adresse dans la barre d'adresse ou demander un favori... Mais c'est vrai qu'on s'en fout un peu.
Ok, finalement tu n'as pas tout à fait répété exactement la même chose.

Il n'empêche qu'il suit un tutoriel et la question c'était "est-ce que l'évènement unload fonctionne," et il fonctionne parfaitement si on lui fait faire autre chose qu'ouvrir une fenêtre. Parler de beforeunload est très bien pour le cas où ce qu'on veut c'est vraiment faire une fenêtre de confirmation, et voilà, on a fait le tour du sujet.

Il n'y a pas lieu de dire que unload ne peut rien faire, le concept même d'un truc qui ne peut rien faire est absurde, il n'existerait pas.

**Bovino** · 19/05/2014, 18h38

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>unload</title>
</head>
<body>
<div id="console">Pas de storage...</div>
<script>
if(localStorage.foo){
    document.getElementById('console').innerHTML = localStorage.foo;
}
window.onunload = function(){
    localStorage.foo = 'bar';
};
</script>
</body>
</html>

Teste ça...

Regarde ça : Cours et tutoriels pour apprendre JavaScript

**iakou** · 19/05/2014, 21h26

Je pensais pourtant avoir laissé le mot de la fin à 'thelvin'...

Puisque vous êtes si sûr, et après avoir testé votre code :

- Sous FF et Chrome : Le refresh vient changer le contenu de la div en "bar", le click croix ne fait rien (comme prévu !)
- Sous IE rien ne se passe : ni sur le refresh ni sur le click croix !
- Sous Opera : curieusement "Bar" s'affiche d'entrée ??? (Alors là c'est le bouquet, Carole !...)

Cela devient un embrouillamini ! Laissons "binco" s'exprimer s'il le désire ; J'ai comme dans l'idée qu'il est en train de bien s'amuser...

Cordialement

**Watilin** · 19/05/2014, 22h41

Pourquoi ne pas consulter la doc plutôt que palabrer sur des connaissances incertaines ? Je traduis car il n'y a pas de version française de la page :

L'évènement unload est lancé quand le document ou une ressource enfant est en train d'être dé-chargé.

Il est déclenché après :

beforeunload (évènement annulable)
pagehide

Le document est dans un état particulier :

toutes les ressources existent encore (img, iframe, etc.)
plus rien n'est visible pour l'utilisateur
les interactions UI sont sans effet (window.open, alert, confirm, etc.)
une erreur n'arrêtera pas le processus de dé-chargement

Des actions comme console.log ou une sauvegarde de données dans le localStorage (exemple de Bovino) sont toujours possibles. Seules les interactions UI sont « désactivées ».

Il est facile avec une console en mode persistant de vérifier dans quelles circonstances l'évènement unload est lancé, selon le navigateur. Par exemple, avec Firefox :

quand on « clique sur la croix », c'est-à-dire quand on ferme la fenêtre ou l'onglet
quand on utilise l'historique (par exemple le bouton « précédent » ou « suivant », mais pas seulement – vous avez déjà essayé un clic droit sur ces boutons ?)
quand on navigue vers une autre page, que ce soit par un lien, un marque-page ou directement via la barre d'adresse
quand on recharge la page

Ce comportement devrait être universel, cependant – comme d'habitude – des petits malins parmi les navigateurs s'amusent à ne rien faire comme tout le monde. Se référer à la table de compatibilité de Quirksmode.org. En l'occurence, le trublion cette fois, c'est Opera.

Il faut bien comprendre que l'évènement unload est à utiliser quand on est certain que la page va être dé-chargée. C'est utile par exemple pour des opérations de sauvegarde (encore une fois, voir l'exemple de Bovino) ou pour notifier un serveur (par exemple de chat) que l'utilisateur s'est déconnecté.

En revanche, l'évènement beforeunload a été conçu pour donner une seconde chance à l'utilisateur : lui permettre de revenir sur sa décision de fermer la page. Pour cette raison, beforeunload est annulable alors que unload ne l'est pas. De plus, beforeunload permet les interactions UI (alert et autres).

Pour aller plus loin, une lecture intéressante (en anglais) : Don't Let the Door Hit You Onunload and Onbeforeunload

Au fait, l'attribut language de la balise <script> est déprécié. Soit on met type="text/javascript", soit on ne met rien.

Iakou, à propos de tes tests :

- Sous FF et Chrome : [...] le click croix ne fait rien (comme prévu !)

As-tu tenté de réouvrir la page après l'avoir fermée ?

- Sous IE rien ne se passe

Sans plus de détails, je dirais que ta version d'IE est trop ancienne et ne supporte pas localStorage.

- Sous Opera : curieusement "Bar" s'affiche d'entrée ??? (Alors là c'est le bouquet, Carole !...)

Ça ne devrait pas faire ça. Sous quelle version as-tu testé ? Efface ton localStorage, refais le test avec soin et dis-nous si ça refait la même chose. Souviens-toi qu'avec cette page de test, il suffit d'un seul unload détecté avec succès pour que "bar" soit affiché toutes les fois suivantes.

**binco** · 20/05/2014, 13h15

Bonjour,

Merci à tous,

Débutant en JavaScript et non informaticien, je ne suis pas intervenu dans l'argumentaire
Toutefois cet échange est tout à votre honneur et ressort la pertinence et le sérieux de vos connaissances

Pour ma part je vais creuser l'option beforeunload

Cordialement

L'évènement Unload ne marche pas

JavaScript

Discussions similaires

Partager

Partager