Distinguer le rafraîchissement de la fermeture d'une page avec onbeforeonload

**zied91** · 08/12/2014, 18h14

salut

j'ai un problème avec mon code javascript:
j'ai développé un script qui affiche une alerte lorsqu'il détecte le fermeture du navigateur et ça marche mais il affiche le même alerte lors de rafraîchir mon page web et je veux pas ça

voila mon code js :

Code html :

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
19
20
21
22
23
24
<html>
<head>
	<title></title>
	<script type="text/javascript">
function savePrompt() {
 
// si unsavedData = true, message montré
// si unsavedData = false, la navigation n'est pas interrompue
 
var message = 'On passe';
return message;
 
 
}
 
window.onbeforeunload = savePrompt;
</script>
</head>
<body>
	Page 1 : Have fun xD!!!
 
	<a href="page2.html">test d'un lien</a>
</body>
</html>

merci d'avance

**sekaijin** · 08/12/2014, 20h40

rafraichir ça n'existe pas

rafraîchir c'est fermer puis ouvrir la même page.
A+JYT

**zied91** · 09/12/2014, 09h49

Salut,

Je voudrais détecter le clic sur la croix de fermeture du navigateur pour appliquer un script. J'ai utilisé onbeforeonload et ça marche mais lorsque j'actualise le page web le même alerte apparait.
Je ne veux pas voir cette alerte lorsque j'actualiser ma page web. Je veux la voir juste sur le clic de la croix de fermeture du navigateur.

Code js :

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
<html>
<head> 
<script type="text/javascript">
 
window.onbeforeunload = confirmExit;
 
 
 
function confirmExit()
{ 
	return 'Vous voulez fermer votre navigateur ?';
}
</script>
</head> 
<body>
	fsdknvkmdjsnvlsflksfn,
</body>
</html>

Merci d'avance.

**Bovino** · 09/12/2014, 10h41

JavaScript n'a accès qu'à l'environnement de la page, pas à celui du navigateur. Il est donc capable de savoir que tu quittes la page, mais en aucune manière la façon dont tu quittes la page.

**lysandro** · 09/12/2014, 11h11

Le gestionnaire d'évènement que tu utilises onbeforeunload est appelé chaque fois que la page va être déchargée.
C'est à dire, si tu réactualises la page (F5), ou que tu navigues, au travers d'un lien, sur une autre page, ou que tu fermes l'onglet qui contient la page, ou que tu fermes le navigateur et donc l'onglet qui contient la page ...

edit: oups, pas vu avant de poster. ce que dit bovino en plus concis:

Envoyé par Bovino

JavaScript n'a accès qu'à l'environnement de la page, pas à celui du navigateur. Il est donc capable de savoir que tu quittes la page, mais en aucune manière la façon dont tu quittes la page.

Je n'ai pas de solution pour la réactualisation de la page.

En ce qui concerne la navigation, tu peux essayer ça :

- créer un page "maitre", celle qui va contenir ton code pour le test de déchargement de la page, et qui hébergera les autres pages ;
- créer tes autres pages normalement, c'est à dire sans test sur le déchargement.

Avec ton premier exemple, ça donnerait :

Page "maitre" :

Code html :

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
19
20
21
22
<html>
<head>
	<title></title>
	<script type="text/javascript">
function savePrompt() {
 
// si unsavedData = true, message montré
// si unsavedData = false, la navigation n'est pas interrompue
 
var message = 'On passe';
return message;
 
 
}
 
window.onbeforeunload = savePrompt;
</script>
</head>
<frameset>
	<frame src="page1.html">
</frameset>
</html>

Dans la page "maitre", on a remplacé la balise <body> par <frameset>(resp. </body> par </frameset>), la balise permet d'afficher au sein d'une même page, plusieurs autres pages.
On a rajouté une balise <frame src="page1.html"> pour afficher ta première page. Visuellement le résultat sera identique à ton exemple.

Page 1

Code html :

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

1
2
3
4
5
6
7
8
9
10
<html>
<head>
	<title></title>
</head>
<body>
	Page 1 : Have fun xD!!!
 
	<a href="page2.html" target="_self">test d'un lien</a>
</body>
</html>

Dans Page 1 (page1.html)

On a réécrit les liens avec l'attribut target="_self" cela signifie que l'on souhaite ouvrir le lien dans la même fenêtre. La page sera déchargée, mais comme la fenêtre qui contient la page n'est pas la fenêtre "maitre", mais la le fenêtre qui correspond à la balise <frame src="page1.html">, ta page "maitre", elle, ne sera pas déchargée et donc pas d'événement beforeunload.

On aurait aussi pu rajouter un attribut name="zoneAffichagePages" sur la balise <frame ...>, dans ce cas les liens dans les autres pages se seraient écrits avec target="zoneAffichagePages".

Maintenant une question : est-ce une application locale pour des utilisateurs comme par exemple un choix d'imprimante ? ou une application web ?
Si c'est le premier cas, tu pourrais envisager une application .hta (sous windows oeuf corse).

**lysandro** · 09/12/2014, 17h10

En complément, mais c'est pas la panacée, tu peux aller gratter du coté de l'événement 'keydown' pour essayer d'annuler l'appui sur la touche F5. Ca semble fonctionner avec Firefox mais pas avec IE8. On peut éventuellement éviter l'icone de rafraichissement en ouvrant une fenêtre sans menu, mais il reste le menu contextuel quoique ça aussi ça doit pouvoir se gérer.

Distinguer le rafraîchissement de la fermeture d'une page avec onbeforeonload

JavaScript

Discussions similaires

Partager

Partager