Impedisci che una pagina web si allontani tramite JavaScript

Question

Come impedire che una pagina web vada via usando JavaScript?

Answer 1

L'uso di onunload ti consente solo di visualizzare i messaggi, ma non interromperà la navigazione (perché è troppo tardi). Tuttavia, puoi utilizzare onbeforeunload e interromperà la navigazione:

window.onbeforeunload = function() {
  return "Are you sure you want to navigate away?";
}

Modifica : confirm () rimosso nell'istruzione return in quanto ciò ha causato una finestra di conferma come previsto, ma ha anche mostrato una seconda conferma con il risultato della prima conferma.

/ p>

Answer 2

A differenza di altri metodi qui presentati, questo bit di codice non farà sì che il browser visualizzi un avviso che chiede all'utente se vuole andarsene; invece, sfrutta la natura avvenuta del DOM per reindirizzare alla pagina corrente (e quindi annullare la navigazione) prima che il browser abbia la possibilità di scaricarlo dalla memoria.

Poiché funziona cortocircuitando direttamente la navigazione, non può essere utilizzato per impedire la chiusura della pagina; tuttavia, può essere utilizzato per disabilitare il frame-busting.

(function () {
    var location = window.document.location;

    var preventNavigation = function () {
        var originalHashValue = location.hash;

        window.setTimeout(function () {
            location.hash = 'preventNavigation' + ~~ (9999 * Math.random());
            location.hash = originalHashValue;
        }, 0);
    };

    window.addEventListener('beforeunload', preventNavigation, false);
    window.addEventListener('unload', preventNavigation, false);
})();

Disclaimer: non dovresti mai farlo. Se su una pagina è presente un codice di frame-busting, rispetta i desideri dell'autore.

Answer 3

Ho finito con questa versione leggermente diversa:

var dirty = false;
window.onbeforeunload = function() {
    return dirty ? "If you leave this page you will lose your unsaved changes." : null;
}

Altrove ho impostato il flag sporco su true quando il modulo viene sporcato (o altrimenti desidero impedire la navigazione via). Ciò mi consente di controllare facilmente se l'utente riceve o meno il messaggio Conferma navigazione.

Con il testo nella risposta selezionata vengono visualizzati prompt ridondanti:

Answer 4

Nell'esempio di Ayman, restituendo false si impedisce la chiusura della finestra / scheda del browser.

window.onunload = function () {
  alert('You are trying to leave.');
  return false;
}

Answer 5

L'equivalente in un modo più moderno e compatibile con il browser, usando le moderne API addEventListener.

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  e.returnValue = confirmationMessage;     // Gecko and Trident
  return confirmationMessage;              // Gecko and WebKit
});

Fonte: https://developer.mozilla.org/en- USA / docs / Web / Eventi / beforeunload

Answer 6

L'equivalente della risposta accettata in jQuery 1.11:

$(window).on("beforeunload", function () {
    return "Please don't leave me!";
});

Esempio di JSFiddle

La risposta di altCognito ha utilizzato l'evento unload , che accade troppo tardi perché JavaScript interrompa la navigazione.

Answer 7

Usa onunload .

Per jQuery, penso che funzioni così:

$(window).unload(function() { 
  alert("Unloading"); 
  return falseIfYouWantToButBeCareful();
});

Answer 8

Il messaggio di errore suggerito può duplicare il messaggio di errore già visualizzato nel browser. In Chrome, i 2 messaggi di errore simili vengono visualizzati uno dopo l'altro nella stessa finestra.

In Chrome, il testo visualizzato dopo il messaggio personalizzato è: " Sei sicuro di voler lasciare questa pagina? " ;. In Firefox, non mostra affatto il nostro messaggio di errore personalizzato (ma mostra comunque la finestra di dialogo).

Un messaggio di errore più appropriato potrebbe essere:

window.onbeforeunload = function() {
    return "If you leave this page, you will lose any unsaved changes.";
}

O stile stackoverflow: " Hai iniziato a scrivere o modificare un post. "

Answer 9

Se stai rilevando un pulsante Indietro / Avanti del browser e non vuoi spostarti, puoi utilizzare:

window.addEventListener('popstate', function() {
    if (window.location.origin !== 'http://example.com') {
        // Do something if not your domain
    } else if (window.location.href === 'http://example.com/sign-in/step-1') {
        window.history.go(2); // Skip the already-signed-in pages if the forward button was clicked
    } else if (window.location.href === 'http://example.com/sign-in/step-2') {
        window.history.go(-2); // Skip the already-signed-in pages if the back button was clicked
    } else {
        // Let it do its thing
    }
});

Altrimenti, puoi utilizzare l'evento beforeunload , ma il messaggio potrebbe funzionare o meno sul browser, e richiede la restituzione di qualcosa che forza un prompt incorporato.