Comment montrer «Êtes-vous sûr de vouloir vous éloigner de cette page?» Lorsque des changements ont été commis?

Mise à jour (2017)

Les navigateurs modernes envisagent maintenant d'afficher un message personnalisé comme un danger pour la sécurité et il a donc été supprimé de tous. Les navigateurs affichent maintenant uniquement des messages génériques. Comme nous ne devons plus nous soucier de définir le message, il est aussi simple que:

 // Enable navigation prompt window.onbeforeunload = function() { return true; }; // Remove navigation prompt window.onbeforeunload = null; 

Lisez ci-dessous le support du navigateur existant.

Mise à jour (2013)

La réponse originale est adaptée pour IE6-8 et FX1-3.5 (c'est ce que nous avons ciblé en 2009 quand il a été écrit), mais est plutôt dépassé maintenant et ne fonctionnera pas dans la plupart des navigateurs actuels – j'ai quitté Ci-dessous pour référence.

La window.onbeforeunload n'est pas traitée de manière constante par tous les navigateurs. Il devrait s'agir d'une référence de fonction et non d'une chaîne (comme la réponse originale indiquée), mais cela fonctionnera dans les navigateurs plus anciens, car la vérification de la plupart d'entre eux semble être de savoir si quelque chose est affecté à la onbeforeunload d' onbeforeunload (y compris une fonction qui renvoie null ).

Vous définissez window.onbeforeunload à une référence de fonction, mais dans les navigateurs plus anciens, vous devez définir le returnValue de l'événement au lieu de simplement renvoyer une chaîne:

 var confirmOnPageExit = function (e) { // If we haven't been passed the event get the window.event e = e || window.event; var message = 'Any text will block the navigation and display a prompt'; // For IE6-8 and Firefox prior to version 4 if (e) { e.returnValue = message; } // For Chrome, Safari, IE8+ and Opera 12+ return message; }; 

Vous ne pouvez pas avoir confirmOnPageExit faire la vérification et renvoyer null si vous souhaitez que l'utilisateur continue sans le message. Vous devez toujours supprimer l'événement pour l'allumer et l'éteindre de manière fiable:

 // Turn it on - assign the function that returns the string window.onbeforeunload = confirmOnPageExit; // Turn it off - remove the function entirely window.onbeforeunload = null; 

Réponse originale (travaillé en 2009)

Pour l'allumer:

 window.onbeforeunload = "Are you sure you want to leave?"; 

Pour l'éteindre:

 window.onbeforeunload = null; 

Gardez à l'esprit que ce n'est pas un événement normal – vous ne pouvez pas vous lier de la manière standard.

Pour vérifier les valeurs? Cela dépend de votre cadre de validation.

Dans jQuery, cela pourrait être quelque chose comme (exemple très basique):

 $('input').change(function() { if( $(this).val() != "" ) window.onbeforeunload = "Are you sure you want to leave?"; }); 

Le Microsoft-ism onbeforeunload est le point le plus proche d'une solution standard, mais sachez que le support du navigateur est inégal; Par exemple, pour Opera, cela ne fonctionne que dans la version 12 et ultérieure (toujours en version bêta à partir de cette écriture).

En outre, pour une compatibilité maximale , vous devez faire plus que simplement renvoyer une chaîne, comme expliqué sur Mozilla Developer Network .

Exemple: définissez les deux fonctions suivantes pour activer / désactiver l'invite de navigation (voir l'exemple de MDN):

 function enableBeforeUnload() { window.onbeforeunload = function (e) { return "Discard changes?"; }; } function disableBeforeUnload() { window.onbeforeunload = null; } 

Ensuite, définissez un formulaire comme ceci:

 <form method="POST" action="" onsubmit="disableBeforeUnload();"> <textarea name="text" onchange="enableBeforeUnload();" onkeyup="enableBeforeUnload();"> </textarea> <button type="submit">Save</button> </form> 

De cette façon, l'utilisateur ne sera averti de naviguer que s'il a changé la zone de texte et ne sera pas invité lorsqu'il soumettra le formulaire.

Pour que cela fonctionne dans Chrome et Safari, vous devriez le faire comme ça

 window.onbeforeunload = function(e) { return "Sure you want to leave?"; }; 

Référence: https://developer.mozilla.org/fr/DOM/window.onbeforeunload

Avec JQuery, ces choses sont assez faciles à faire. Puisque vous pouvez lier à des ensembles.

Il ne suffit pas de faire la surcharge, vous ne voulez déclencher la navigation que si quelqu'un a commencé à éditer des choses.

Jquerys 'beforeunload' a bien fonctionné pour moi

 $(window).bind('beforeunload', function(){ if( $('input').val() !== '' ){ return "It looks like you have input you haven't submitted." } }); 

C'est un moyen simple de présenter le message si des données sont entrées dans le formulaire et de ne pas montrer le message si le formulaire est soumis:

 $(function () { $("input, textarea, select").on("input change", function() { window.onbeforeunload = window.onbeforeunload || function (e) { return "You have unsaved changes. Do you want to leave this page and lose your changes?"; }; }); $("form").on("submit", function() { window.onbeforeunload = null; }); }) 

Pour les nouveaux gens qui recherchent une solution simple, essayez Areyousure.js

Pour élargir la réponse déjà incroyable de Keith :

Messages d'avertissement personnalisés

Pour permettre des messages d'avertissement personnalisés, vous pouvez l'envelopper dans une fonction comme celle-ci:

 function preventNavigation(message) { var confirmOnPageExit = function (e) { // If we haven't been passed the event get the window.event e = e || window.event; // For IE6-8 and Firefox prior to version 4 if (e) { e.returnValue = message; } // For Chrome, Safari, IE8+ and Opera 12+ return message; }; window.onbeforeunload = confirmOnPageExit; } 

Ensuite, appelez simplement cette fonction avec votre message personnalisé:

 preventNavigation("Baby, please don't go!!!"); 

Activation de la navigation à nouveau

Pour réactiver la navigation, tout ce que vous devez faire est de configurer window.onbeforeunload to null . Ici, il est enveloppé dans une petite fonction soignée qui peut être appelée partout:

 function enableNavigation() { window.onbeforeunload = null; } 

En utilisant jQuery pour lier ceci pour former des éléments

Si vous utilisez jQuery, cela peut facilement être lié à tous les éléments d'une forme comme celle-ci:

 $("#yourForm :input").change(function() { preventNavigation("You have not saved the form. Any \ changes will be lost if you leave this page."); }); 

Ensuite, pour permettre le dépôt du formulaire:

 $("#yourForm").on("submit", function(event) { enableNavigation(); }); 

Formes modifiées dynamiquement:

preventNavigation() et enableNavigation() peuvent être liés à toutes les autres fonctions nécessaires, par exemple en modifiant dynamiquement un formulaire ou en cliquant sur un bouton qui envoie une requête AJAX. Je l'ai fait en ajoutant un élément d'entrée caché au formulaire:

 <input id="dummy_input" type="hidden" /> 

Ensuite, chaque fois que je souhaite empêcher l'utilisateur de naviguer, je déclenche la modification de cette entrée pour vous assurer que preventNavigation() soit exécuté:

 function somethingThatModifiesAFormDynamically() { // Do something that modifies a form // ... $("#dummy_input").trigger("change"); // ... } 

Essayez ceci, ça marche 100%

 <html> <body> <script> var warning = true; window.onbeforeunload = function() { if (warning) { return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes"; } } $('form').submit(function() { window.onbeforeunload = null; }); </script> </body> </html> 

Lorsque l'utilisateur commence à modifier le formulaire, un drapeau booléen sera défini. Si l'utilisateur essaie alors de naviguer à l'écart de la page, vous vérifiez ce drapeau dans l'événement window.ununload . Si le drapeau est défini, vous affichez le message en le renvoyant en tant que chaîne. Le retour du message en tant que chaîne affichera une boîte de dialogue de confirmation contenant votre message.

Si vous utilisez ajax pour commettre les modifications, vous pouvez définir le drapeau sur false après que les modifications ont été commises (c.-à-d. Dans l'événement de réussite d'ajax).

Vous pouvez ajouter un événement onchange sur la zone de texte (ou tous les autres champs) qui définissent une variable dans JS. Lorsque l'utilisateur tente de fermer la page (window.ununload), vous vérifiez la valeur de cette variable et affiche l'alerte en conséquence.

Sur la base de toutes les réponses sur ce fil, j'ai écrit le code suivant et cela a fonctionné pour moi.

Si vous ne possédez que certaines balises entrée / texte qui requiert un événement onunload, vous pouvez attribuer des attributs de data-onunload="true" HTML5 comme data-onunload="true"

Pour par exemple

 <input type="text" data-onunload="true" /> <textarea data-onunload="true"></textarea> 

Et le Javascript (jQuery) peut ressembler à ceci:

 $(document).ready(function(){ window.onbeforeunload = function(e) { var returnFlag = false; $('textarea, input').each(function(){ if($(this).attr('data-onunload') == 'true' && $(this).val() != '') returnFlag = true; }); if(returnFlag) return "Sure you want to leave?"; }; }); 

Voici mon html

 <!DOCTYPE HMTL> <meta charset="UTF-8"> <html> <head> <title>Home</title> <script type="text/javascript" src="script.js"></script> </head> <body onload="myFunction()"> <h1 id="belong"> Welcome To My Home </h1> <p> <a id="replaceME" onclick="myFunction2(event)" href="https://www.ccis.edu">I am a student at Columbia College of Missouri.</a> </p> </body> 

Et c'est ainsi que j'ai fait quelque chose de similaire dans javaScript

 var myGlobalNameHolder =""; function myFunction(){ var myString = prompt("Enter a name", "Name Goes Here"); myGlobalNameHolder = myString; if (myString != null) { document.getElementById("replaceME").innerHTML = "Hello " + myString + ". Welcome to my site"; document.getElementById("belong").innerHTML = "A place you belong"; } } // create a function to pass our event too function myFunction2(event) { // variable to make our event short and sweet var x=window.onbeforeunload; // logic to make the confirm and alert boxes if (confirm("Are you sure you want to leave my page?") == true) { x = alert("Thank you " + myGlobalNameHolder + " for visiting!"); } } 

Cela peut être facilement effectué en définissant un ChangeFlag sur true, sur l'événement onChange de TextArea . Utilisez javascript pour afficher la boîte de dialogue de confirmation en fonction de la valeur ChangeFlag . Jeter le formulaire et naviguer vers la page demandée si la confirmation retourne vraie, sinon rien faire .

Il existe un paramètre "onunload" pour l'étiquette du corps que vous pouvez appeler des fonctions javascript à partir de là. Si elle renvoie false, elle empêche la navigation.

Ce que vous souhaitez utiliser est l'événement onunload en JavaScript.

Voici un exemple: http://www.w3schools.com/jsref/event_onunload.asp