Impedire a una pagina web di allontanarsi utilizzando JavaScript

Question

Come evitare che una pagina Web si allontani utilizzando JavaScript?

Answer 1

Utilizzando onunload consente solo di visualizzare i messaggi, ma non interrompe la navigazione (perché è troppo tardi). Tuttavia, è possibile utilizzare onbeforeunload e sarà interrompere la navigazione:

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

Edit: Rimosso confirm() nella dichiarazione ritorno come questo ha causato una finestra di conferma come previsto, ma ha anche mostrato un secondo confermare con il risultato della prima conferma .

Answer 2

Utilizzare onunload.

Per jQuery, credo che questo funziona in questo modo:

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

Answer 3

Nell'esempio di Ayman restituendo falso si impedisce la finestra del browser/scheda dalla chiusura.

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

Answer 4

Quel messaggio di errore suggerito può duplicare il messaggio di errore che il browser già visualizza. 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 visualizza comunque la finestra di dialogo).

Un messaggio di errore più appropriata potrebbe essere:

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

o lo stile StackOverflow: "Hai iniziato a scrivere o modificare un post."

Answer 5

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

Poiché funziona cortocircuitando la navigazione direttamente, non può essere utilizzato per impedire che la pagina venga chiusa; tuttavia, può essere usato 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); 
})(); 

Diniego: Non si dovrebbe mai fare questo. Se su una pagina è presente un codice per il frame-frame, si prega di rispettare i desideri dell'autore.

Answer 6

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 dirty true quando il modulo viene sporcato (o, diversamente, non vuole impedire la navigazione di distanza). Questo mi consente di controllare facilmente se l'utente riceve o meno il prompt di conferma di navigazione.

Con il testo nella risposta selezionato si vede istruzioni ridondanti:

Answer 7

L'equivalente alla risposta accettata in jQuery 1.11:

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

JSFiddle example

risposta di altCognito usato l'evento unload, che avviene troppo tardi perché JavaScript possa interrompere la navigazione zione.

Answer 8

L'equivalente in un modo più moderno e compatibile con browser, utilizzando 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-US/docs/Web/Events/beforeunload