Menu
This question may sound weird, because most of the time popstate is fired synchronously as users press the back button.
However, W3C spec states that a UA (browser) is allowed to queue popstate when traversing history (see item 14), ie. popstate is fired asynchronously (even though URL has changed at this point).
Browser vendors interpret and implement this spec differently. Mozilla decides Firefox should be able to fire popstate before load, and for good reasons, so that slow images will not block popstate.
Chrome/Safari decides otherwise, and it leads our problem:
When managing history for a web app, it's often desirable to kick off history management as soon as possible, eg. at DOMContentLoaded instead of load. But in return, users are not able to back out of any pushState, because all popstate are queued until load.
We are seeking advices for ways to handle such scenario. I come up with a few myself:
load can fire ASAP.load is fired.load instead of DOMContentLoaded.Are there better solutions?
Update: Things get ugly when there are ajax that fire before load, if those request result in DOM change, and DOM change happens to have some images, load is delayed until those images are loaded/timeout, meaning popstate is queued for even longer.
Update 2: To add a simple demo for it, visit this jsbin page with chrome and see popstate will be blocked until load is fired. You can compare result between cached image and uncached image.
541
The popstate event will be triggered by doing a browser action such as a click on the back or forward button (or calling history. back() or history. forward() in JavaScript). Browsers tend to handle the popstate event differently on page load.
A popstate event is dispatched to the window every time the active history entry changes between two history entries for the same document. If the history entry being activated was created by a call to history. pushState() or was affected by a call to history.
HTML DOM PopStateEvent Events that occur when the window's history changes.
The window. onpopstate event is fired automatically by the browser when a user navigates between history states that a developer has set. This event is important to handle when you push to history object and then later retrieve information whenever the user presses the back/forward button of the browser.
Can you try calling popstate during unload of the previous page. For eg, if you're in page 1 and want to move to page 2, instead of calling pop state during the load/ready of page 2, why don't you call pop state in the unload event of the page 1?
Not sure whether it satisfies your scenario. But I wasn't able to try it in your bin.
190
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
