2

I'm just curious why this happens, and if it can be fixed (I'm aware IE is old & evil, not to be used online any more, this is just for some test-case and compatibility).

There is listener for "beforeunload" and changes body class (I see it does add that class), but it does not apply the style defined for that class in IE (other new browsers work fine).

<?php  /* emulate long load */ sleep(2); ?><!DOCTYPE html>
<html><head><meta charset="utf-8">
<style>
    body.is-unloading {background:#333;opacity:0.5}
</style>
<script>
    function xx(){ document.querySelector('body').className += ' is-unloading'; }
    window.addEventListener("beforeunload", function(event) { xx(); });
</script>
</head><body class="not-unloading">
     <button onClick="window.location.reload()">RELOAD</button>
</body></html>
halfer
  • 19,824
  • 17
  • 99
  • 186
Peminator
  • 783
  • 1
  • 9
  • 24
  • even further, noticed that in IE, if page contains beforeunload listener, than page content gets cleared, on hitting window.location.reload(), so for actually having the animation, better, but more confusing a bit, is onClick="window.location.href=window.location.href" (difference is, if page was loaded with POST then this alternative solution does not repost form data, while the windows.location.reload() does) – Peminator Aug 09 '21 at 12:12
  • I can reproduce what you described in the question. And as you said in the comment, using `window.location.href=window.location.href` works. I think it's by design and different browser engines have different behaviors. It might be an issue in IE, even so, it won't be fixed because Microsoft announced the retirement of IE. – Yu Zhou Aug 10 '21 at 10:01
  • Besides, in the [Usage notes](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#usage_notes) of `beforeunload`, it says *It is recommended that developers listen for beforeunload **only** in this scenario: the scenario where the user has entered unsaved data that will be lost if the page is unloaded.* I think you don't need to worry too much about the scenario in your example as we usually don't use this event like this. – Yu Zhou Aug 10 '21 at 10:06
  • @YuZhou well ineed to know if any reload on one specific page happens, to simply show loading animation, until new content loads. And because its an old unoptimized code on old server, loading takes about 5-10 seconds, and if its just reload then the whole page remains as is, until new data received, and its hard to notify the page is refreshing - its kind of "online presence status check" and intended to reload on window focus, that the problem point, u have long open window, u focus it, it inits a reload, but firt seconds user sees th window, it shows old data – Peminator Aug 11 '21 at 12:26
  • If you want to check if reload happens in page, you can try [Navigation Timing API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API). For more information, you can refer to [this answer](https://stackoverflow.com/questions/47068150/how-to-detect-browser-refresh-or-close/47068580#47068580) and [this answer](https://stackoverflow.com/questions/5004978/check-if-page-gets-reloaded-or-refreshed-in-javascript/36444134#36444134). – Yu Zhou Aug 12 '21 at 09:56

0 Answers0