Comment montrer le "Êtes-vous sûr de vouloir quitter cette page?"quand les changements commis?

Le onbeforeunload Microsoft-ISM est la chose la plus proche d'une solution standard, mais sachez que le support du navigateur est inégal; par exemple pour Opera, il ne fonctionne que dans la version 12 et ultérieure (toujours en version bêta à ce jour).

Aussi, pour compatibilité maximale , vous devez faire plus que simplement retourner une chaîne, comme expliqué sur le Mozilla Developer Network .

Exemple: Définir les deux fonctions suivantes pour activer/désactiver l'invite de navigation (cf. le Exemple 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 la navigation que s'il a modifié la zone de texte et ne sera pas invité lorsqu'il soumettra le formulaire.

Pour que cela fonctionne dans Chrome et Safari, vous devez le faire comme ceci

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

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

Avec JQuery ce genre de choses est assez facile à faire. Puisque vous pouvez lier à des ensembles.

Ce n'est pas suffisant pour faire le onbeforeunload, vous voulez seulement déclencher le naviguer si quelqu'un a commencé à éditer des choses.

Jquerys 'beforeunload' a très 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 facile de présenter le message si toutes les données sont saisies dans le formulaire, et de ne pas afficher 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 nouvelles personnes qui recherchent une solution simple, essayez simplement Areyousure.js

Pour développer la réponse déjà étonnante de Keith :

Messages D'avertissement personnalisés

Pour autoriser les 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!!!");

Activer à nouveau la navigation

Pour réactiver la navigation, il vous suffit de définir window.onbeforeunload sur null. Le voici, enveloppé dans une petite fonction soignée qui peut être appelée n'importe où:

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

Utilisation de jQuery pour lier ceci aux éléments de forme

Si vous utilisez jQuery, cela peut facilement être lié à tous les éléments d'un formulaire comme ceci:

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

Ensuite pour permettre la soumission du formulaire:

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

Formes modifiées dynamiquement:

preventNavigation() et enableNavigation() peut être lié à d'autres fonctions au besoin, comme l'dynamiquement modification d'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" />

Puis chaque fois que je vous voulez empêcher l'utilisateur de naviguer loin, je déclenche le changement sur cette entrée pour vous assurer que preventNavigation() est exécuté:

function somethingThatModifiesAFormDynamically() {

    // Do something that modifies a form

    // ...
    $("#dummy_input").trigger("change");
    // ...
}

Ici, essayez ceci, il fonctionne à 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 à apporter des modifications au formulaire, un indicateur booléen sera défini. Si l'utilisateur essaie ensuite de s'éloigner de la page, vous vérifiez cet indicateur dans la fenêtre .onunload événement. Si l'indicateur est défini, vous affichez le message en le renvoyant sous forme de chaîne. Renvoyer le message sous forme de chaîne affichera une boîte de dialogue de confirmation contenant votre message.

Si vous utilisez ajax pour valider les modifications, vous pouvez définir l'indicateur sur false après que les modifications ont été validées (c'est-à-dire dans le ajax succès de l'événement).

Vous pouvez ajouter un événement onchange sur la zone de texte (ou tout autre champ) qui définit une variable dans JS. Lorsque l'utilisateur tente de fermer la page (fenêtre.onunload) vous vérifiez la valeur de cette variable et montrez 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 n'avez que des balises input / textarea qui nécessitent la vérification d'un événement onunload, vous pouvez attribuer des attributs de données 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 en 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!");
}
}

La normeindique que l'invite peut être contrôlée en annulant l'événementbeforeunload ou en définissant la valeur de retour sur une valeurnon nulle . Il indique également que les auteurs devraient utiliser Event.preventDefault() au lieu de returnValue, et le message affiché à l'utilisateur , n'est pas personnalisable.

À partir de 69.0.3497.92, Chrome n'a pas satisfait à la norme. Cependant, il y a un rapport de bogue déposé, et un examen est en cours. Chrome exige returnValue doit être défini par référence à l'objet event, pas la valeur renvoyée par le gestionnaire.

Il est de la responsabilité de l'auteur de suivre si des modifications ont été apportées; cela peut être fait avec une variable ou en s'assurant que l'événement n'est géré que lorsque cela est nécessaire.

window.addEventListener('beforeunload', function (e) {
    // Cancel the event as stated by the standard.
    e.preventDefault();
    // Chrome requires returnValue to be set.
    e.returnValue = '';
});
    
window.location = 'about:blank';

Cela peut être facilement fait en définissant un ChangeFlag à true, sur OnChange événement de TextArea. Utilisez javascript pour afficher la boîte de dialogue confirm basée sur la valeur ChangeFlag. Jetez le formulaire et accédez à la page demandée si confirmer renvoie la valeur true else ne rien faire.

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

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

Il y a un paramètre "onunload" pour la balise body, vous pouvez appeler les fonctions javascript à partir de là. S'il renvoie false, il empêche de naviguer.