JavaScript avant de quitter la page

Question

JavaScript avant de quitter la page

Demandé el 16 de Août, 2011: Quand la question a-t-elle été
61088 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

Je veux faire une confirmation avant que l'utilisateur ne quitte la page. S'il dit ok, il sera redirigé vers une nouvelle page ou annulé pour quitter. J'ai essayé de le faire avec onunload

<script type="text/javascript">
function con() {
    var answer = confirm("do you want to check our other products")
    if (answer){

        alert("bye");
    }
    else{
        window.location = "http://www.example.com";
    }
}
</script>
</head>

<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>

Mais il confirme après que la page soit déjà fermée ? Comment le faire correctement ?

Ce serait encore mieux si quelqu'un montrait comment le faire avec jQuery ?

Demandé el 16 de Août, 2011 par kd7

1 votes

Ha ha ha...Oui, c'est tout à fait vrai...mais heureusement ce n'est pas mon site...mon client demande de le faire de son côté

Commenté el 16 de Août, 2011 par kd7

32 votes

Oui, mais je suis vraiment heureux de voir ces alertes lorsque je suis sur le point de quitter une page Gmail non sauvegardée.

Commenté el 5 de Novembre, 2012 par Etdashou

0 votes

Remarque : sur Firefox 4+, seul un message par défaut est affiché au lieu de votre message personnalisé. developer.mozilla.org/fr/US/docs/Web/Events/beforeunload#Notes

Commenté el 18 de Octobre, 2015 par baptx

Afficher 1 autres commentaires

Answer 1

5 Réponses

Answer 2

383voto

Rocket Hazmat Points 87407

onunload (ou onbeforeunload ) ne peut pas rediriger l'utilisateur vers une autre page. Ceci pour des raisons de sécurité.

Si vous souhaitez afficher une invite avant que l'utilisateur ne quitte la page, utilisez la fonction onbeforeunload :

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

Ou avec jQuery :

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

Cela demandera simplement à l'utilisateur s'il veut quitter la page ou non, vous ne pouvez pas le rediriger s'il choisit de rester sur la page. S'il choisit de quitter la page, le navigateur ira là où il lui a dit d'aller.

Vous pouvez utiliser onunload pour faire des choses avant que la page ne soit déchargée, mais vous ne pouvez pas rediriger à partir de là (Chrome 14+ bloque les alertes à l'intérieur de onunload ) :

window.onunload = function() {
    alert('Bye.');
}

Ou avec jQuery :

$(window).unload(function(){
  alert('Bye.');
});

Répondu el 16 de Août, 2011 par Rocket Hazmat (87407 Points )

0 votes

C'est exact. Vous ne pouvez pas renvoyer un faux depuis onunload . C'était une faute de frappe. Cependant, ce que vous faites, c'est retourner une chaîne de caractères, pas un booléen. Pour cela, vous devez confirm() .

Commenté el 16 de Août, 2011 par Joseph Silber

12 votes

@Joseph : Lorsque vous retournez une chaîne de caractères de onbeforeunload le navigateur place cette chaîne dans sa propre boîte de confirmation. Utilisation de confirm est inutile dans onunload et onbeforeunload car seul le navigateur peut contrôler où il va, pas vous. Regardez cette démo : jsfiddle.net/3kvAC

Commenté el 16 de Août, 2011 par Rocket Hazmat

0 votes

@Rocket..Merci beaucoup pour l'explication.très apprécié !

Commenté el 16 de Août, 2011 par kd7

Afficher 15 autres commentaires

Answer 3

38voto

Wasim Points 1271

Ce code vous permet également de détecter si l'état du formulaire a changé ou non.

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});

Vous pouvez utiliser la fonction JQuery Form Serialize de Google, qui collectera toutes les entrées du formulaire et les enregistrera dans un tableau. Je pense que cette explication est suffisante :)

Répondu el 11 de Janvier, 2014 par Wasim (1271 Points )

0 votes

Savez-vous pourquoi cela ne fonctionne pas ? Pourrait-il être écrasé par d'autres fonctions js / plugins jquery ? J'utilise une application webrtc et je voudrais "fermer" certaines choses lorsque le client ferme la fenêtre, d'où la nécessité de gérer la fermeture de la fenêtre.

Commenté el 8 de Août, 2014 par hey

1 votes

Ceci peut être écrasé par n'importe quel autre plugin etc, la plupart du temps le développeur a fait une erreur avec le sélecteur, si vous avez des doutes sur l'écrasement, mettez votre code jquery avant la fermeture de la balise </body>.

Commenté el 9 de Août, 2014 par Wasim

0 votes

Oui... si vous avez un code JS qui masque ou désactive les champs de saisie après le chargement de la page, alors lorsque vous effectuez la vérification pour comparer les champs cachés et les champs désactivés avec les champs désactivés, vous pouvez utiliser le code JS. \disabled ne seront pas sérialisés. La vérification échouera bien sûr ;) Il y a cette solution de contournement : stackoverflow.com/a/4748748/114029

Commenté el 28 de Octobre, 2014 par Leniel Macaferi

Afficher 4 autres commentaires

Answer 4

22voto

hunter Points 193

Cela donnera l'alerte en quittant la page actuelle

<script type='text/javascript'>
function goodbye(e) {
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye; 

</script>

Répondu el 7 de Août, 2014 par hunter (193 Points )

Answer 5

12voto

David Bélanger Points 4034

Afin d'avoir un popop avec Chrome 14+, vous devez faire ce qui suit :

jQuery(window).bind('beforeunload', function(){
    return 'my text';
});

Il sera demandé à l'utilisateur s'il veut rester ou partir.

Répondu el 6 de Juin, 2013 par David Bélanger (4034 Points )

0 votes

Une idée de la raison pour laquelle cela ne fonctionne pas ? J'utilise chrome (dernière version) ainsi qu'un tas de plugins jquery mais je n'obtiens aucune alerte lorsque je ferme la fenêtre.

Commenté el 8 de Août, 2014 par hey

0 votes

Pourquoi ce vote négatif ? C'est du travail.... Vous devez vous assurer que c'est en dehors du jQuery(document) et je suggère de le mettre juste après que tous vos plugins soient chargés. Aussi, ce snippet ne fait pas d'alerte... c'est seulement une démo avec return .

Commenté el 8 de Août, 2014 par David Bélanger

Answer 6

1voto

Jan Points 370

Ce post est plutôt ancien, mais pour les archives (ou quelqu'un qui trouve cette page via Google) : Vous pourriez aussi bien considérer ce plugin sur github : Il déclenche un événement lorsque quelqu'un entre dans la barre d'adresse. Je ne m'y fierais pas, mais cela pourrait être un moyen discret de demander un retour d'information.

Répondu el 13 de Mai, 2014 par Jan (370 Points )

JavaScript avant de quitter la page

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

JavaScript avant de quitter la page

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: