it-swarm.com.de

Wie kann ich den OnBeforeUnload-Dialog überschreiben und durch meinen eigenen ersetzen?

Ich muss Benutzer vor nicht gespeicherten Änderungen warnen, bevor sie eine Seite verlassen (ein ziemlich häufiges Problem).

window.onbeforeunload=handler

Dies funktioniert, löst jedoch einen Standarddialog mit einer irritierenden Standardnachricht aus, die meinen eigenen Text umschließt. Ich muss entweder die Standardnachricht vollständig ersetzen, damit mein Text klar ist, oder (noch besser) den gesamten Dialog mithilfe von jQuery durch einen modalen Dialog ersetzen.

Bisher bin ich gescheitert und habe niemanden gefunden, der eine Antwort zu haben scheint. 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 habe ich Folgendes ausprobiert (mithilfe eines benutzerdefinierten Bestätigungsdialogs):

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

was auch nicht funktioniert - ich kann mich anscheinend nicht an das beforeunload-Ereignis binden.

337
flesh

Sie können das Standarddialogfeld für onbeforeunload nicht ändern, sodass Sie am besten damit arbeiten können.

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

Hier ist ein Verweis dazu von Microsoft:

Wenn der Eigenschaft returnValue von window.event eine Zeichenfolge zugewiesen wird, wird ein Dialogfeld angezeigt, in dem Benutzer die Möglichkeit haben, auf der aktuellen Seite zu bleiben und die zugewiesene Zeichenfolge beizubehalten. Die im Dialogfeld angezeigte Standardanweisung "Möchten Sie wirklich von dieser Seite weg navigieren? ... Drücken Sie OK, um fortzufahren, oder Abbrechen, um auf der aktuellen Seite zu bleiben." Kann nicht entfernt oder geändert werden.

Das Problem scheint zu sein:

  1. Wenn onbeforeunload aufgerufen wird, wird der Rückgabewert des Handlers als window.event.returnValue.
  2. Anschließend wird der Rückgabewert als Zeichenfolge analysiert (sofern er nicht null ist).
  3. Da false als Zeichenfolge analysiert wird, wird das Dialogfeld gestartet, in dem ein entsprechender true/false übergeben wird.

Das Ergebnis ist, dass es anscheinend keine Möglichkeit gibt, false zu onbeforeunload zuzuweisen, um zu verhindern, dass der Standarddialog angezeigt wird.

Zusätzliche Hinweise zu jQuery:

  • Das Setzen des Ereignisses in jQuery kann problematisch sein , da dadurch auch andere onbeforeunload Ereignisse auftreten können. Wenn Sie nur möchten, dass Ihr Entladevorgang stattfindet, halte ich mich an das einfache alte JavaScript.
  • jQuery hat keine Verknüpfung für onbeforeunload, daher müssten Sie die generische bind -Syntax verwenden.

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

Edit 09/04/2018 : Benutzerdefinierte Nachrichten in Onbeforeunload-Dialogen sind veraltet, da Chrome-51 (vgl .: Versionshinweis )

292
Owen

Was bei mir mit jQuery funktioniert hat und in IE8 getestet wurde, Chrome und Firefox, ist:

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

Es ist wichtig, nichts zurückzugeben, wenn keine Eingabeaufforderung erforderlich ist, da hier Unterschiede zwischen IE und anderen Browserverhalten bestehen.

27
grebe

Obwohl Sie unter bestimmten Umständen nichts gegen die Box unternehmen können, können Sie jemanden abfangen, der auf einen Link klickt. Für mich hat sich der Aufwand für die meisten Szenarien gelohnt und ich habe das Unload-Ereignis als Fallback verlassen.

Ich habe Boxy anstelle des Standard-jQuery-Dialogfelds verwendet. Es ist hier verfügbar: 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 an ein anderes Ereignis anhängen und mehr danach filtern, auf welche Art von Anker geklickt wurde. Dies funktioniert jedoch für mich und das, was ich tun möchte, und dient als Beispiel für die Verwendung oder Verbesserung durch andere. Dachte, ich würde dies für diejenigen, die diese Lösung wollen, teilen.

Ich habe Code ausgeschnitten, daher funktioniert das möglicherweise nicht wie es ist.

20
Dan Power

1) Verwenden Sie onbeforeunload, nicht onunload.

2) Wichtig ist, dass keine return-Anweisung ausgeführt wird. Damit will ich nicht vermeiden, von Ihrem Hundeführer zurückzukehren. Sie geben alles in Ordnung zurück, tun dies jedoch, indem Sie sicherstellen, dass Sie das Ende der Funktion erreichen und KEINE return-Anweisung ausführen. Unter diesen Umständen tritt der eingebaute Standarddialog nicht auf.

3) Wenn Sie onbeforeunload verwenden, können Sie einen Ajax-Aufruf in Ihrem Unbeforeunload-Handler ausführen, um den Server aufzuräumen. Dieser muss jedoch synchron sein, und Sie müssen auf die Antwort in Ihrem Onbeforeunload-Handler warten und sie verarbeiten (unter Berücksichtigung der Bedingungen) Bedingung (2) oben). Ich mache das und es funktioniert gut. Wenn Sie einen synchronen Ajax-Anruf tätigen, wird alles gehalten, bis die Antwort zurückkommt. Wenn Sie eine asynchrone Methode ausführen und sich nicht um die Antwort vom Server kümmern, wird der Seitenentladevorgang fortgesetzt und Ihr Ajax-Aufruf wird durch diesen Vorgang abgebrochen - einschließlich eines Remote-Skripts, falls es ausgeführt wird.

9
user1164763

Dies ist in chrome jetzt nicht möglich, um Spam zu vermeiden, lesen Sie Javascript, bevor keine benutzerdefinierte Nachricht angezeigt wird für weitere Details.

4
Abhijeet

Versuchen Sie, ein return; anstelle einer Nachricht .. das funktioniert bei den meisten Browsern für mich. (Dies verhindert nur wirklich die Geschenke des Dialogs)

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

Ich hatte das gleiche Problem, es war in Ordnung, ein eigenes Dialogfeld mit meiner Nachricht zu erhalten, aber das Problem, mit dem ich konfrontiert war, war: 1) Es gab eine Nachricht bei allen Navigationen, ich möchte es nur zum Schließen anklicken. 2) Mit meiner eigenen Bestätigungsmeldung, wenn der Benutzer Abbrechen wählt, wird weiterhin das Standarddialogfeld des Browsers angezeigt.

Es folgt der Lösungscode, den ich gefunden habe und den ich auf meiner Masterseite geschrieben habe.

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;
3
Imran Rizvi

Sie können feststellen, welche Taste (OK oder Abbrechen) vom Benutzer gedrückt wurde, da die On-Load-Funktion nur aufgerufen wird, wenn der Benutzer das Verlassen der Seite auswählt. Trotzdem sind die Möglichkeiten in dieser Funktion begrenzt, weil das DOM zusammengebrochen wird. Sie können Javascript ausführen, aber der ajax POST tut nichts, daher können Sie diese Methode nicht für das automatische Abmelden verwenden. Aber dafür gibt es eine Lösung. Das window.open ('logout .php ') in der OnUnload-Funktion ausgeführt, so dass sich der Benutzer mit einem neuen Fenster abmeldet.

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

Dieser Code wird aufgerufen, wenn Benutzer die Seite verlassen oder das aktive Fenster schließen und sich mit 'logout.php' abgemeldet haben. Das neue Fenster wird sofort geschlossen, wenn Logout PHP aus Code besteht:

window.close();
3
Tamas Cseh
 <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>

beziehen sich auf http://www.codeprojectdownload.com

1
Krishna Patel

Was ist mit der spezialisierten Version des "bind" -Befehls "one"? Sobald der Ereignishandler zum ersten Mal ausgeführt wird, wird er automatisch als Ereignishandler entfernt.

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