Skip to content Skip to sidebar Skip to footer
Home / Back / Html / Javascript / Safari

Browser Back Button Treats Scripted Changes Differently In Safari And Chrome

Post a Comment
For a time-consuming navigation (implemented in a Python/Flask backend), it's nice to have visual feedbak indicating that the next page is expected to take some time to load, even

Solution 1:

Actually the thing I was missing was the so-called "Back/forward cache" or bfcache. As a performance optimization, bfcache stores the full snapshot of a page, incuding the changes done by my litte JavaScript in Safari, but not in Chrome.

It turned out that we can react on bfcache events easily:

<script type="text/javascript">
    function loading(){  // replace content by Loading ...
        document.getElementById("loading").style.display = 'block';
        document.getElementById("content").style.display = 'none';
    }
    function makeContentVisisble() {  // replace Loading ... by content
        document.getElementById('loading').style.display = 'none';
        document.getElementById('content').style.display = 'block';
    }
</script>

<body onpageshow="makeContentVisisble()"> <!-- called on browser back -->
    <div id="loading" class="invisible">
        Loading ...
    </div>
    <div id="content">
        <a href="/time/consuming/service/call" onclick="loading();">Work miracles.</a>

That way browser back works smoothly (and fast, without page reload from backend) in both Chrome and Safari.

Find more detail about bfcache in this faily current blog from 2020: https://web.dev/bfcache/


Post a Comment for "Browser Back Button Treats Scripted Changes Differently In Safari And Chrome"