256 votes

Comment montrer le "Êtes-vous sûr de vouloir quitter cette page?" lorsque des modifications commis?

Ici, dans stackoverflow, si vous avez commencé à faire des changements, vous tentez de naviguer loin de la page, un javascript bouton de confirmation s'affiche et vous demande: "Êtes-vous sûr de vouloir quitter cette page?" blee bla bloo...

Quelqu'un a mis en œuvre cette avant, comment faire pour vérifier que les modifications ont été commis? Je crois que je pourrais le faire moi-même, je suis en train d'apprendre les bonnes pratiques auprès de vous les experts.

J'ai essayé ce qui suit, mais ne fonctionne toujours pas:

<html>
<body>
    <p>Close the page to trigger the onunload event.</p>
    <script type="text/javascript">
        var changes = false;        
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }
    </script>

    <input type='text' onchange='changes=true;'> </input>
</body>
</html>

Quelqu'un peut-il poster un exemple?

354voto

Keith Points 46288

Mise à jour (2013)

À l'origine de réponse est adapté pour IE6-8 et FX1-3.5 (qui est ce que nous ont ciblage en 2009 quand il a été écrit), mais plutôt de date maintenant et ne fonctionne pas dans la plupart des navigateurs actuels - j'ai laissé ci-dessous pour référence.

L' window.onbeforeunload n'est pas traités de la même façon par tous les navigateurs. Il doit être une référence à une fonction et non une chaîne de caractères (comme l'original de la réplique indiqué), mais qui fonctionne dans les navigateurs plus anciens, parce que la case à cocher pour la plupart d'entre eux semble être de savoir si quelque chose est affecté onbeforeunload (y compris une fonction qui retourne l' null).

Vous définissez window.onbeforeunload à une fonction de référence, mais dans les anciens navigateurs, vous devez définir le returnValue des cas au lieu de simplement retourner une chaîne de caractères:

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 que confirmOnPageExit faire vérifier et retourner la valeur null si vous souhaitez que l'utilisateur puisse continuer sans le message. Vous avez encore besoin de supprimer l'événement de manière fiable l'activer ou la désactiver:

// 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 à cette question (qui a travaillé en 2009)

Pour l'activer:

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

Pour le désactiver:

window.onbeforeunload = null;

Gardez à l'esprit que ce n'est pas un événement normal, vous ne pouvez pas lier de façon standard.

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

En jQuery ce pourrait être quelque chose comme (exemple de base):

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

37voto

Søren Løvborg Points 3425

L' onbeforeunload Microsoft-ism est la chose la plus proche que nous avons à une solution standard, mais être conscient que la prise en charge du navigateur est inégale; par exemple, pour l'Opéra, il ne fonctionne que dans la version 12, et plus tard (encore en version bêta de cette écriture).

Aussi, pour un maximum de compatibilité, vous devez faire plus que de simplement retourner une chaîne de caractères, comme expliqué sur le Mozilla Developer Network.

Exemple: Définir les deux fonctions suivantes pour activer/désactiver l'invite de navigation (cf. le MDN exemple):

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

Définissez ensuite 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 doit uniquement être mis en garde à propos de l'utilisation de suite si il a changé la zone de texte, et de ne pas être invité quand il est en fait la soumission du formulaire.

19voto

stigok Points 4223

Pour faire ce travail dans Chrome et Safari, vous devez faire comme ceci

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

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

18voto

Sam Saffron Points 56236

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

Ce n'est PAS assez pour faire la onbeforeunload, vous souhaitez déclencher l'naviguer loin si quelqu'un a commencé à éditer.

13voto

Devon Peticolas Points 61

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."
    }
});

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X