1

Is it possible to alter DOM in beforeunload handler? Chrome seems to apply DOM modifications after the user pressed "stay" in browser alert about leaving the page, and I want a part of the page to be hidden while this alert is visible.

See the 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/

The only solution I have so far is to animate the div to opacity:0 and to have a code in setInterval that constantly resets this animation. While the code is running the div is always visible. Chrome stops all the code when it shows an alert, so the animation finally runs till the end and hides the div. But it's a terrible solution - I'm constantly updating the DOM to reset the animation. Does anyone have any better ideas?

2
  • Did you try to modify css before attaching the event handler instead of doing it inside the handler?
    – Gunnar
    Commented Sep 1, 2016 at 11:21
  • When should I do it? I'm reacting to the user trying to leave the page. How do I know that the user tries to leave the page (by typing something in the address bar, for example) before beforeunload fires?
    – Anton
    Commented Sep 21, 2016 at 13:57

1 Answer 1

0

The process being executed by Chrome appears to be:

1) call the handler, waiting synchronously for its return value

2) if the return (event.returnValue) is suitably undefined, continue the unload

3) otherwise present a modal popup of some kind, getting the user's permission to cancel the navigation.

4) if navigation is cancelled, stay on the page and apply a refresh cycle to the page view.

I have stepped through an onbeforeunload handler in the debugger, and when I do so, style changes WILL take effect before the modal dialog appears instead of after it closes. This seems to indicate that using the debugger introduces additional DOM refresh cycles that would otherwise not occur in normal running. I am trying to find a way to get one of these refresh cycles to occur programmatically from within the handler, but so far no luck.

In other browsers, there seems to be refresh cycles inserted between steps 1-4 above, giving the desired behavior.

3
  • Any success with getting the refresh triggered before the modal dialog? Commented Jun 23, 2017 at 13:57
  • We decided to abandon efforts of capturing onbeforeunload and treating it specially; there are any number of ways a user can become disconnected from the application session that will not fire an event. Our team has had better results by addressing all inadvertent disconnects in a uniform way. Commented Jun 26, 2017 at 13:27
  • Alright, thanks. We're probably also not going to use onbeforeunload. Although our use case was merely to display a custom message for the user "behind the browser popup" readable through the transparent overlay and closing along with the popup - which worked in firefox, but not in Chrome. Commented Jun 27, 2017 at 13:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.