onbeforeunload personalizzazione schermata di conferma

Question

E 'possibile creare una casella di conferma personalizzata per l'evento onbeforeunload in un browser? Ho provato, ma poi ho 2 scatole di conferma (uno per me, che non è altro che confermare il ritorno ... e poi quello standard dal browser).

Al momento il mio codice è simile:

var inputChanged = false;

$(window).load(function() {
    window.onbeforeunload = navigateAway;
    $(':input').bind('change', function() { inputChanged = true; });
});

function navigateAway(){
    if(inputChanged){
        return 'Are you sure you want to navigate away?';
    }
}

Sto usando jQuery per questo.

Answer 1

window.onbeforeunload = function (e) {
  var message = "Your confirmation message goes here.",
  e = e || window.event;
  // For IE and Firefox
  if (e) {
    e.returnValue = message;
  }

  // For Safari
  return message;
};

Si prega di notare: maggior parte dei browser messo questo messaggio dopo qualche altro testo. Non si ha il controllo completo del contenuto della finestra di dialogo di conferma.

Answer 2

No, non si può evitare quello standard dal browser. Tutto quello che puoi fare è iniettare qualche testo personalizzato in esso; se si utilizza il seguente gestore di eventi (registrato il modo in cui prototipo lib):

Event.observe(window, "beforeunload", function(event) {
    if (showMyBeforeUnloadConfirmation)
        event.returnValue = "foo bar baz";
});

(e showMyBeforeUnloadConfirmation è vero) si otterrà la conferma standard del browser con il seguente testo:

  

Sei sicuro di voler navigare lontano da questa pagina?

     

foo bar baz

     

Premere OK per continuare o Annulla per rimanere nella pagina corrente.

     

[OK] [Annulla]

Answer 3

Ho affrontato lo stesso problema, sono stato in grado di ottenere la propria finestra di dialogo con il mio messaggio, ma i problemi che ho riscontrato sono stati:

1. Si stava dando un messaggio su tutte le navigazioni e volevo solo per stretta clic.
2. Con il mio messaggio di conferma Se l'utente seleziona "Cancel", mostra ancora finestra di dialogo predefinita del browser.

In seguito è il codice di soluzioni che ho trovato, che ho scritto sulla mia pagina master.

function closeMe(evt) {
    if (typeof evt == 'undefined') {
        evt = window.event;
    }
    if (evt && evt.clientX >= (window.event.screenX - 150) && evt.clientY >= -150 && evt.clientY <= 0) {
        return "Do you want to log out of your current session?";
    }
}

window.onbeforeunload = closeMe;