DOM in beforeunload in Chrome ändern

Question

Ist es möglich, DOM in beforeunload-Handler zu ändern? Chrome scheint DOM-Änderungen anzuwenden nach der Benutzer gedrückt "Bleib" in Browser-Warnung über das Verlassen der Seite, und ich möchte einen Teil der Seite ausgeblendet werden während dieser Alarm sichtbar ist.

Siehe Demo:

<script> 
window.onbeforeunload = function(e){ document.getElementById('a').style.display = "none"; e.returnValue = "adios";} 
</script> 
<div id=a >This text should disappear when the user tries to leave the page</div> 

https://jsfiddle.net/qmatic/6sLp7rmq/

Die einzige Lösung, die ich bisher habe, ist das div zu Opazität animieren: 0 und einen Code in setInterval zu haben, die diese Animation ständig zurücksetzt. Während der Code läuft, ist das div immer sichtbar. Chrome stoppt den gesamten Code, wenn eine Warnung angezeigt wird. Die Animation wird schließlich bis zum Ende ausgeführt und das div ausgeblendet. Aber es ist eine schreckliche Lösung - ich aktualisiere ständig das DOM, um die Animation zurückzusetzen. Hat jemand bessere Ideen?

Answer 1

Der Prozess, durch Chrome ausgeführt wird zu sein scheint:

1), um die Behandlungsroutine aufrufen, synchron für den Rückgabewert wartet

2), wenn der Rücklauf (event.returnValue) in geeigneter Weise nicht definiert ist, weiterhin die entladen

3) ansonsten ein modales Popup von irgendeiner Art, die Erlaubnis des Benutzers erhalten, um die Navigation abzubrechen.

4) Wenn die Navigation abgebrochen wird, bleiben Sie auf der Seite und wenden Sie einen Aktualisierungszyklus auf die Seitenansicht an.

Ich habe durch einen onbeforeunload Handler im Debugger trat, und wenn ich so tun, Stil ändert WILL wirksam werden, bevor das modale Dialog nach statt erscheint es schließt. Dies scheint darauf hinzuweisen, dass die Verwendung des Debuggers zusätzliche DOM-Aktualisierungszyklen einführt, die sonst bei normaler Ausführung nicht auftreten würden. Ich versuche einen Weg zu finden, einen dieser Auffrischungszyklen programmgesteuert aus dem Handler heraus zu bekommen, aber bisher kein Glück.

In anderen Browsern scheinen Aktualisierungszyklen zwischen den obigen Schritten 1-4 eingefügt zu sein, was das gewünschte Verhalten ergibt.