Comment montrer la « Êtes-vous sûr de vouloir naviguer loin de cette page? » Lorsque des changements sont engagés?

StackOverflow https://stackoverflow.com/questions/1119289

Question

Ici stackoverflow, si vous avez commencé à faire des changements, vous essayez de naviguer loin de la page, un bouton de confirmation javascript apparaît et demande: « Êtes-vous sûr de vouloir quitter cette page » blee bla Bloo ...

Quelqu'un at-il mis en œuvre auparavant, comment puis-je suivre que des changements ont été commis? Je crois que je pouvais faire moi-même, je suis en train d'apprendre les bonnes pratiques 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 afficher un exemple?

Était-ce utile?

La solution

Mise à jour (2017)

Les navigateurs modernes considèrent maintenant l'affichage d'un message personnalisé pour être un danger pour la sécurité et il a donc été retiré de tous. Les navigateurs affichent désormais uniquement les messages génériques. Puisque nous n'avons plus à vous soucier de régler le message, il est aussi simple que: 

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

Lire ci-dessous pour le support du navigateur existant.

Mise à jour (2013)

La réponse orginal convient à IE6-8 et FX1-3.5 (qui est ce que nous ciblons en 2009 quand il a été écrit), mais est plutôt maintenant obsolètes et ne fonctionnera pas dans la plupart des navigateurs actuels - I « il ai laissé ci-dessous pour référence.

Le window.onbeforeunload n'est pas traité de façon cohérente par tous les navigateurs. Il doit être une référence de fonction et non une chaîne (comme la réponse originale dit) mais cela fonctionne dans les anciens navigateurs car le contrôle pour la plupart d'entre eux semble être si quelque chose est affecté à onbeforeunload (y compris une fonction qui retourne null).

Vous définissez window.onbeforeunload à une référence de fonction, mais dans les navigateurs plus anciens, vous devez définir l'returnValue de l'événement au lieu de simplement retourner 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 que confirmOnPageExit faire le chèque et retourner null si vous voulez que l'utilisateur de continuer sans le message. Vous devez toujours supprimer l'événement pour tourner de manière fiable et le 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 (travaillé en 2009)

Pour l'activer: 

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

Pour la désactiver: 

window.onbeforeunload = null;

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

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

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

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

Autres conseils

Le onbeforeunload Microsoft-ism est le plus proche chose que nous avons à une solution standard, mais il faut savoir que le soutien du navigateur est inégale; par exemple. pour Opera il ne fonctionne que dans la version 12 et versions ultérieures (encore en version bêta de cette écriture).

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

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

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

Définissez ensuite une forme 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 mis en garde contre la navigation de suite s'il a changé la zone de texte, et ne sera pas invité quand il présente effectivement la forme.

Pour faire ce travail 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. Comme vous pouvez lier à des ensembles.

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

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

Ceci est un moyen facile de présenter le message si les données sont entrées dans la forme, 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 de nouvelles personnes qui est à la recherche d'une solution simple, essayez Areyousure.js

Pour développer réponse déjà incroyable de Keith :

messages d'avertissement personnalisés

Pour, vous pouvez envelopper permettre des messages d'avertissement personnalisés en fonction comme ceci: 

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, il suffit d'appeler cette fonction avec votre message personnalisé: 

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

Activation navigation à nouveau

Pour réactiver la navigation, tout ce que vous devez faire est de définir window.onbeforeunload à null. Ici, il est, enveloppé dans une petite fonction propre qui peut être appelée n'importe où: 

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

Utiliser jQuery pour lier ce 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 la soumission du formulaire: 

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

formes modifiées Dynamiquement:

preventNavigation() et enableNavigation() peuvent être liés à d'autres fonctions si nécessaire, telles que la modification dynamique d'une forme, 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é à la forme: 

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

Alors chaque fois que je veux 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");
    // ...
}

essayer ici cela, 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 à la forme, un drapeau booléen sera défini. Si l'utilisateur tente alors de naviguer loin de la page, vous vérifiez que le drapeau dans le window.onunload événement. Si le drapeau est défini, vous montrer le message en retournant comme une chaîne. De retour le message comme une chaîne affichera un dialogue de confirmation contenant votre message.

Si vous utilisez ajax pour valider les modifications, vous pouvez définir le drapeau false après que les changements ont été commis (par exemple en cas de succès ajax).

Le états standards qui invite peut être contrôlée par l'annulation de l'événement beforeunload ou régler le retour valeur à une valeur non nulle . Il précise également que les auteurs devraient utiliser Event.preventDefault () au lieu de returnValue, et le message affiché à l'utilisateur n'est pas personnalisable .

Au 69.0.3497.92, Chrome n'a pas respecté la norme. Cependant, il y a un rapport de bogue déposé, et < a href = "https://chromium-review.googlesource.com/c/chromium/src/+/1154225" rel = "nofollow noreferrer"> revue est en cours. Chrome nécessite returnValue à définir par référence à l'objet de l'événement, et non la valeur retournée par le gestionnaire.

Il est a été fait de la responsabilité de suivre si les changements de l'auteur; il peut être fait avec une variable ou en assurant l'événement est uniquement manipulé si 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';

Vous pouvez ajouter un événement onchange sur la zone de texte (ou tout autre domaine) qui a établi une variable JS. Lorsque l'utilisateur tente de fermer la page (window.onunload) vous vérifiez la valeur de cette variable et de montrer l'alerte en conséquence.

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

Si vous avez seulement quelques balises d'entrée / textarea qui nécessite un événement onunload à vérifier, vous pouvez assigner HTML5 données-attributs comme data-onunload="true"

pour par exemple. 

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

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

ici est 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 voilà comment je l'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!");
}
}

Il peut être facilement fait en définissant un ChangeFlag true, sur onChange cas de TextArea . Utilisez javascript pour afficher confirmer boîte de dialogue basé sur la ChangeFlag valeur. Jeter le formulaire et accédez à la page demandée si confirmer renvoie true, sinon ne rien .

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 de là. Si elle retourne false empêche la navigation loin.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top