Come mostrare il “Sei sicuro di voler navigare lontano da questa pagina?” In caso di modifiche commessi?

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

Domanda

Qui in StackOverflow, se hai iniziato a fare i cambiamenti, allora si tenta di navigare lontano dalla pagina, un pulsante di conferma javascript si presenta e chiede: "Sei sicuro di voler navigare lontano da questa pagina" blee bla bloo ...

Qualcuno ha implementato questa prima, Come faccio a monitorare i cambiamenti che sono stati commessi? Credo che avrei potuto fare io stesso, sto cercando di imparare le buone pratiche da voi esperti.

Ho provato quanto segue, ma ancora non funziona: 

<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>

Chiunque può inviare un esempio?

È stato utile?

Soluzione

Update (2017)

Browser moderni ora considerano la visualizzazione di un messaggio personalizzato che sia pericoloso per la sicurezza ed è stato quindi rimosso da tutti loro. I browser visualizzano ora solo i messaggi generici. Dal momento che non abbiamo più preoccupare di impostare il messaggio, è semplice come: 

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

Leggi di seguito per il supporto del browser legacy.

Update (2013)

La risposta originale è adatto per IE6-8 e FX1-3.5 (che è quello che stavamo prendendo di mira di nuovo nel 2009, quando è stato scritto), ma è piuttosto fuori di data ora e non funzionerà nella maggior parte dei browser attuali - I 'Ho lasciato sotto per riferimento.

Il window.onbeforeunload non è trattata in modo coerente da tutti i browser. Dovrebbe essere un riferimento alla funzione e non una stringa (come la risposta originale dichiarato), ma che funziona in browser più vecchi, perché il controllo per la maggior parte di loro sembra essere se qualcosa è assegnato a onbeforeunload (tra cui una funzione che restituisce null).

È impostare window.onbeforeunload ad un riferimento di funzione, ma nel browser più vecchi si deve impostare il returnValue dell'evento invece di restituire una stringa: 

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;
};

Non si può avere che confirmOnPageExit fare l'assegno e restituire null se si desidera che l'utente per continuare senza il messaggio. Hai ancora bisogno di rimuovere l'evento di girare in modo affidabile su e fuori: 

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

// Turn it off - remove the function entirely
window.onbeforeunload = null;

risposta originale (ha lavorato nel 2009)

Per accenderlo: 

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

Per disattivarlo: 

window.onbeforeunload = null;

Tenete a mente che questo non è un evento normale -. Non è possibile associare ad esso in modo standard

Per verificare la presenza di valori? Questo dipende dal vostro quadro di convalida.

In jQuery questo potrebbe essere qualcosa di simile (esempio molto semplice): 

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

Altri suggerimenti

Il onbeforeunload Microsoft-ismo è la cosa più vicina che abbiamo a una soluzione standard, ma essere consapevoli che il supporto del browser non è uniforme; per esempio. per Opera funziona solo in versione 12 e successive (ancora in beta al momento della stesura).

Inoltre, per compatibilità massima , è necessario fare di più che semplicemente restituire una stringa, come spiegato sulla Developer Network Mozilla .

Esempio: Definire le seguenti due funzioni per abilitare / disabilitare la richiesta di navigazione (cfr nell'esempio MDN): 

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

Quindi definire una forma simile a questo: 

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

In questo modo, l'utente sarà avvertito solo la navigazione via se ha cambiato l'area di testo, e non verrà richiesto quando in realtà l'invio del modulo.

Per fare questo lavoro in Chrome e Safari, si dovrebbe fare in questo modo 

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

Riferimento: https://developer.mozilla.org/en/DOM/window. onbeforeunload

con jQuery questa roba è abbastanza facile da fare. Dal momento che è possibile associare ai set.

La sua non è sufficiente per fare l'onbeforeunload, si desidera attivare solo la navigazione via se qualcuno ha iniziato la modifica di roba.

jquerys 'beforeunload' ha lavorato molto per me 

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

Questo è un modo semplice per presentare il messaggio se i dati in ingresso nella forma, e non mostrare il messaggio se il modulo viene inviato: 

$(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;
    });
})

per nuove persone che è alla ricerca di una soluzione semplice, basta provare Areyousure.js

Per espandere il di Keith risposta già incredibile :

messaggi di avviso personalizzato

Per consentire personalizzato messaggi di avviso, si può avvolgere in una funzione come questa: 

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;
}

Poi basta chiamare tale funzione con il tuo messaggio personalizzato: 

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

navigazione Attivazione di nuovo

Per riattivare la navigazione, tutto quello che dovete fare è impostare window.onbeforeunload a null. Qui è, avvolto in una piccola funzione di pulito che può essere chiamato ovunque: 

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

Uso di jQuery per legare questo per formare gli elementi

Se si utilizza jQuery, questo può facilmente essere associato a tutti gli elementi di un modulo come questo: 

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

Poi per consentire il modulo per essere presentato: 

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

forme dinamicamente modificati:

preventNavigation() e enableNavigation() possono essere legati a qualsiasi altra funzione, se necessario, ad esempio modificando dinamicamente un modulo o cliccando su un pulsante che invia una richiesta AJAX. Ho fatto questo con l'aggiunta di un elemento di input nascosto al form: 

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

Poi ogni volta che voglio impedire all'utente di navigare via, innescare il cambiamento su tale ingresso a fare in modo che preventNavigation() viene eseguito: 

function somethingThatModifiesAFormDynamically() {

    // Do something that modifies a form

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

Qui provare questo funziona al 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>

Quando l'utente inizia a fare le modifiche al modulo, verrà impostato un flag booleano. Se l'utente tenta quindi di navigare lontano dalla pagina, si controlla quella bandiera nella window.onunload evento. Se è impostato il flag, si mostra il messaggio restituendo come una stringa. Tornando il messaggio come una stringa a finestra una finestra di conferma contenente il tuo messaggio.

Se si utilizza Ajax per confermare le modifiche, è possibile impostare il flag per false dopo i cambiamenti sono stati commessi (vale a dire in caso di successo Ajax).

Il stati standard quel suggerimento può essere controllata annullando il beforeunload evento o modificando il ritorno valore a un non nullo valore . Essa afferma inoltre che gli autori dovrebbero usare Event.preventDefault () al posto di returnValue, e il messaggio mostrato all'utente non è personalizzabile .

A partire dal 69.0.3497.92, Chrome non ha rispettato il campione. Tuttavia, v'è un bug report depositata, ed un < a href = "https://chromium-review.googlesource.com/c/chromium/src/+/1154225" rel = "nofollow noreferrer"> recensione è in corso. Chrome richiede returnValue da impostare con riferimento alla oggetto evento, non il valore restituito dal gestore.

E 'responsabilità dell'autore per monitorare se sono state apportate modifiche; può essere fatto con una variabile o garantendo che viene gestito solo quando necessario. 

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';

È possibile aggiungere un evento onchange sulla textarea (o qualsiasi altro campo) che definisce una variabile in JS. Quando l'utente tenta di chiudere la pagina (window.onunload) di controllare il valore di tale variabile e mostrare l'avviso di conseguenza.

In base a tutte le risposte in questa discussione, ho scritto il seguente codice e ha funzionato per me.

Se avete soltanto alcuni tag di input / textarea che richiede un evento onunload da controllare, è possibile assegnare HTML5 data-attributi come data-onunload="true"

per es. 

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

e Javascript (jQuery) può apparire come segue: 

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

Ecco il mio 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>

E così questo è come ho fatto qualcosa di simile in 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!");
}
}

Si può essere fatto facilmente impostando un ChangeFlag a true, il onChange caso di TextArea . Utilizzare JavaScript per mostrare conferma finestra di dialogo in base alla ChangeFlag Valore. Eliminare il modulo e passare alla pagina richiesta se conferma restituisce vero, altrimenti do-nothing .

Ciò che si vuole utilizzare è l'evento onunload in JavaScript.

Ecco un esempio: http://www.w3schools.com/jsref/event_onunload. asp

C'è un parametro "onunload" per il tag body è possibile chiamare funzioni javascript da lì. Se restituisce false impedisce la navigazione via.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top