Wie kann ich das überschreiben der OnBeforeUnload-dialog und ersetzen es mit meiner eigenen?

Question

Ich muss warnen die Benutzer über das nicht gespeicherte änderungen vor dem verlassen einer Seite (ein ziemlich häufiges problem).

window.onbeforeunload=handler

Dies funktioniert, aber es löst sich ein Standard-dialog mit einem lästigen standard-Nachricht, umschließt meinen eigenen text.Ich muss entweder vollständig ersetzen die standard-Nachricht, so dass mein text klar ist, oder (noch besser) ersetzen Sie den gesamten dialog mit ein modales Dialogfeld mit jQuery.

So weit habe ich nicht und ich habe nicht gefunden, alle anderen, die scheint zu haben, eine Antwort.Ist es überhaupt möglich?

Javascript auf meiner Seite:

<script type="text/javascript">   
   window.onbeforeunload=closeIt;
</script>

Die closeIt () - Funktion:

function closeIt()
{
  if (changes == "true" || files == "true")
  {
      return "Here you can append a custom message to the default dialog.";
  }
}

Mit jQuery und jqModal ich habe versucht, diese Art der Sache, die (mithilfe eines benutzerdefinierten dialog bestätigen):

$(window).beforeunload(function() {
        confirm('new message: ' + this.href + ' !', this.href);
        return false;
    });

was auch nicht funktioniert - ich kann nicht scheinen zu binden, um das beforeunload-event.

Answer 1

Sie können den Standard-Dialog für onbeforeunload ändern, so dass Ihre beste Wette mit ihm arbeiten kann.

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

Hier ist ein Verweis diese von Microsoft :

  

Wenn eine Zeichenfolge an die Returnvalue Eigenschaft window.event zugewiesen wird, erscheint ein Dialogfeld, dass Benutzer die Möglichkeit gibt, auf der aktuellen Seite zu bleiben und die Zeichenfolge behalten, die ihm zugewiesen wurde. Die Standard-Anweisung, die in dem Dialogfeld angezeigt wird: „Sind Sie sicher, dass Sie auf dieser Seite weg navigieren möchten? ... Drücken Sie auf OK, um fortzufahren, oder Abbrechen auf der aktuellen Seite zu bleiben.“, Kann nicht entfernt oder verändert werden.

Das Problem scheint zu sein:

1. Wenn onbeforeunload aufgerufen wird, wird es den Rückgabewert des Handlers als window.event.returnValue nehmen.
2. Es wird dann den Rückgabewert als String parsen (es sei denn, es ist null).
3. Da false als String analysiert wird, wird das Dialogfeld ausgelöst, die dann eine entsprechende true / false passieren.

Das Ergebnis ist, es keine Möglichkeit false die Zuweisung zu sein scheint onbeforeunload es aus dem Standard-Dialog zu verhindern.

Weitere Hinweise auf jQuery:

• Einstellen der Veranstaltung in jQuery können problematisch sein, wie andere onbeforeunload Ereignisse können auch auftreten. Wenn Sie nur für Ihre Entlade-Ereignis möchten auftreten ich es plain ol‘JavaScript bleiben würde.

• jQuery keine Abkürzung für onbeforeunload haben, so dass Sie die generische bind Syntax verwenden müssten.

  $(window).bind('beforeunload', function() {} );
  

Bearbeiten 2018.09.04 : benutzerdefinierte Nachrichten in onbeforeunload Dialoge sind da Chrom-51 (siehe veraltet: Release-Info )

Answer 2

Was für mich gearbeitet, mit jQuery und getestet in IE8, Chrome und Firefox, ist:

$(window).bind("beforeunload",function(event) {
    if(hasChanged) return "You have unsaved changes";
});

Es ist wichtig, nichts zurück, wenn keine Aufforderung erforderlich ist, da gibt es Unterschiede zwischen IE und anderem Browser-Verhalten hier.

Answer 3

Es gibt zwar nicht alles, was Sie über das Feld unter bestimmten Umständen tun können, können Sie jemand auf einen Link zu klicken, abfangen. Für mich ist dies der Aufwand für die meisten Szenarien und als Ausweich wert war, habe ich das Unload-Ereignis verlassen.

ich verwendet habe, Boxy anstelle des Standard-jQuery Dialog, es finden Sie hier: http: // onehackoranother.com/projects/jquery/boxy/

$(':input').change(function() {
    if(!is_dirty){
        // When the user changes a field on this page, set our is_dirty flag.
        is_dirty = true;
    }
});

$('a').mousedown(function(e) {
    if(is_dirty) {
        // if the user navigates away from this page via an anchor link, 
        //    popup a new boxy confirmation.
        answer = Boxy.confirm("You have made some changes which you might want to save.");
    }
});

window.onbeforeunload = function() {
if((is_dirty)&&(!answer)){
            // call this if the box wasn't shown.
    return 'You have made some changes which you might want to save.';
    }
};

Sie könnten auf ein anderes Ereignis anhängen, und filtern mehr auf, welche Art von Anker geklickt wurde, aber das funktioniert für mich und was ich tun möchte, und dient als Beispiel für andere zu verwenden oder zu verbessern. Dachte, ich würde dies für den Wunsch, diese Lösung diejenigen teilen.

Ich habe Code ausgeschnitten, so kann dies nicht funktionieren, wie es ist.

Answer 4

1) Verwenden Sie onbeforeunload, nicht onUnload.

2) Das Wichtigste ist, eine return-Anweisung zu vermeiden Ausführung. Ich meine nicht, durch diese, aus dem Transporteur zu vermeiden, zurück. Sie gelangen wieder alles in Ordnung, aber Sie tun es, indem sichergestellt wird, dass Sie das Ende der Funktion erreichen und führen Sie KEINE return-Anweisung. Unter diesen Bedingungen ist die eingebaute Standard Dialog findet nicht statt.

3) Sie können, wenn Sie onbeforeunload verwenden, einen Ajax-Aufruf in Ihrem unbeforeunload Handler laufen auf dem Server, um aufzuräumen, aber es muss ein synchroner sein, und Sie müssen warten, und die Antwort in Ihrem onbeforeunload Handler behandeln (noch respektiert Bedingung (2) oben). Ich tue dies, und es funktioniert gut. Wenn Sie eine synchrone Ajax-Aufruf zu tun, wird alles gehalten, bis die Antwort zurückkommt. Wenn Sie ein asynchron man tun, denken, dass Sie nicht über die Antwort des Server ist es egal, die Seite entladen weiter und Ihr Ajax-Aufruf wird durch diesen Prozess abgebrochen -. Mit einem Remote-Skript, wenn es läuft

Answer 5

Versuchen Sie, eine return; statt einer Nachricht platzieren .. das die meisten Browser für mich funktioniert. (Dies ist nur wirklich verhindert präsentiert Dialoges)

window.onbeforeunload = function(evt) {            
        //Your Extra Code
        return;
}

Answer 6

Sie können erkennen, welche Taste (ok oder Abbrechen) gedrückt, durch die Benutzer, weil die onunload-Funktion nur aufgerufen, wenn der Benutzer choise leaveing Sie die Seite.Lediglich in dieser Funktion die Möglichkeiten beschränkt, denn der DOM ist zusammengebrochen.Sie können javascript ausführen, aber der ajax-POST nicht alles tun, daher können Sie nicht verwenden diese methode für die automatische Abmeldung.Aber es gibt eine Lösung für, dass.Das Fenster.open('logout.php') ausgeführt, in die onunload-Funktion, damit der Benutzer wird abgemeldet, mit einem neuen Fenster öffnen.

function onunload = (){
    window.open('logout.php');
}

Dieser code wird aufgerufen, wenn der Benutzer die Seite verlassen oder schließen der aktiven Fenster und der Benutzer abgemeldet, die von 'logout.php'.Das neue Fenster schließen sofort, wenn das logout php aus code bestehen, der:

window.close();

Answer 7

stand ich das gleiche Problem, ich war in Ordnung zu sein eigenes Dialogfeld mit meiner Nachricht zu bekommen, aber das Problem, das ich konfrontiert war: 1) Es war Meldung geben auf all Navigations ich es für eine engen Klick nur wollen. 2) mit meiner eigenen Bestätigungsmeldung, wenn der Benutzer wählt abbrechen noch den Standard-Dialogfeld zeigt Browser.

Im Anschluss an die Lösungen Code, den ich gefunden, was ich auf meiner Master-Seite geschrieben.

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;

Answer 8

Das kann jetzt nicht mehr in Chrom erfolgen Spam zu vermeiden, bezieht href="https://stackoverflow.com/questions/37782104/javascript-onbeforeunload-not-showing-custom-message"> zur für weitere Details zeigt.

Answer 9

 <script type="text/javascript">
        window.onbeforeunload = function(evt) {
            var message = 'Are you sure you want to leave?';
            if (typeof evt == 'undefined') {
                evt = window.event;
            }       
            if (evt) {
                evt.returnValue = message;
            }
            return message;
        } 
    </script>

siehe http://www.codeprojectdownload.com

Answer 10

Was ist die spezielle Version des „bind“ Befehl „Eins“ zu verwenden. Sobald die Event-Handler zum ersten Mal ausgeführt wird, wird er automatisch als Event-Handler entfernt.

$(window).one("beforeunload", BeforeUnload);