Bfcache / pageshow event - event.persisted javascript is always set to false?

Question

In the standard Java / SpringMVC / JSP / jQuery web application, I try to detect the "Back" event (or history.go (-1)) in order to update (AJAX) the resulting component / when I return to the page (where we can change the backend data which are displayed by the resulting component).

I tried the following in JavaScript (following some posts on StackExchange how to do this):

<script type="text/javascript"> $(document).ready(function() { window.onpageshow = function(event) { console.log("Event:"); console.dir(event); if (event.persisted) { alert("non-jQuery - back to page - loaded from bfcache"); } else { alert("non-jQuery - loaded page from server"); } }; $(window).on("pageshow", function(event){ console.log("Event:"); console.dir(event); if (event.originalEvent.persisted) { alert("jquery - back to page - loaded from bfcache"); } else { alert("jquery - loaded page from server"); } }); }); </script> 

I run OpenSUSE Linux and tried this with FireFox and Chrome (latest versions), but every time the event persisted attribute is false (I see this in the JavaScript console and the warnings that pop-up from the code above). Each time, I mean, regardless of whether it was downloaded from the server or shown again using the "Back" (or "Back") button.

My intention was to call an AJAX to reload the resulting component / panel with the updated data from the server, if the page was displayed using the "Back" or "<23" button.

I also tried installing a upload handler (which does nothing) to prevent the page from being placed in bfcache, but it still seems to show the bf caching version and set event.persisted (or event.originalEvent.persisted ) to false

Is this property managed correctly by Linux? Am I doing something stupid in my code? Any help or ideas would be greatly appreciated, thanks!

Answer 1

This seems to be a bug in Chrome (also present in IE11 ).

I found the following workaround:

 <input type="hidden" id="cacheTest"></input> <script> var input = document.querySelector('#cacheTest') if (input.value === "") { // the page has been loaded from the server, // equivalent of persisted == false } else { // the page has been loaded from the cache, // equivalent of persisted == true } // change the input value so that we can detect // if the page is reloaded from cache later input.value = "some value" </script> 

This leads to the fact that in most browsers, when the page is loaded from the cache, the values ​​of the form fields are also saved.

Answer 2

I found that hidden input buttons are not a reliable solution, as they may contain the wrong value when the user goes to the page and then refreshes the image. Some browsers (Firefox) retain the input values ​​when updating, so every time the user clicks on the update, it is updated again, since the enter button holds the wrong value. This is a typical scenario for forums (the user views the topic, clicks the "Back" button to return to the list of topics, and can continue to delete the update to check if there are new topics).

As Grégoire Clermont noted, event.persisted does not work in Chrome (and IE), and it still has not been fixed for any browser as of February 2017. The good news is that you can rely on window.performance.navigation.type == 2 for chrome and IE. Ironically, Firefox is unreliable for the latter, but it does not matter, since it is reliable for event.persisted . The following code worked for me:

 if (document.addEventListener) { window.addEventListener('pageshow', function (event) { if (event.persisted || window.performance && window.performance.navigation.type == 2) { location.reload(); } }, false); } 

Answer 3

keep the code below anywhere in the js file. This restricts clicking the back button on the page (or form).

window.onload = function () { window.history.forward(); }

Answer 4

I know this is a little late, but this works for me:

 window.onpageshow = function(e) { if (e.persisted) { alert("Page shown"); window.location.reload(); } }; 

I don’t think you need this in the document ready function, just use vanilla as above.