You must implement it yourself which is quite easy. When invoking pushState give the data object a unique incrementing id (uid). When onpopstate handler is invoked; check the state uid against a persistent variable containing the last state uid. Update the persistent variable with the current state uid. Do different actions depending on if state … Read more
Is it possible for you to use the input field without an id or name attribute? Without that, the browser doesn’t really have any way to associate a history with that element. In my real quick testing on Firefox, this seemed to do the trick: <form> <!– these will remember input –> With id: <input … Read more
For about a decade and half now, I have been using two tricks that I once discovered by painful trial and error: Input field values – especially ‘hidden’ ones – are preserved in the browser’s history along with the URL – AND – the onLoad event is called when returning to the page by the … Read more
This is because of the back-forward cache in Safari. You can use the following code to force a reload when the back-button is pressed. window.onpageshow = function(e) { // e -> event if (e.persisted) { window.location.reload(); } }; Additionally, if you are using jQuery … $(window).bind(“pageshow”, function(e) { // e -> event if (e.originalEvent.persisted) { … Read more
I used to use this to also be notified of when pushState and replaceState are called: // Add this: var _wr = function(type) { var orig = history[type]; return function() { var rv = orig.apply(this, arguments); var e = new Event(type); e.arguments = arguments; window.dispatchEvent(e); return rv; }; }; history.pushState = _wr(‘pushState’), history.replaceState = _wr(‘replaceState’); … Read more
You’re looking for replaceState(), it replaces the current position in the history instead of pushing a new one, like pushState() does history.replaceState({}, ‘Title’, link.href); from MDN history.replaceState() operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one. replaceState() is particularly useful when you want to update the … Read more
You may have moved on by now, but… as far as I know there’s no way to delete a history entry (or state). One option I’ve been looking into is to handle the history yourself in JavaScript and use the window.history object as a carrier of sorts. Basically, when the page first loads you create … Read more
Ah, the back button. You might imagine “back” fires a JavaScript event which you could simply cancel like so: // this does not work document.onHistoryGo = function() { return false; } No so. There simply is no such event. If you really do have a web app (as opposed to just a web site with … Read more
if (‘scrollRestoration’ in history) { history.scrollRestoration = ‘manual’; } (Announced by Google on September 2, 2015) Browser support: Chrome: supported (since 46) Firefox: supported (since 46) IE: not supported Edge: supported (since 79) Opera: supported (since 33) Safari: supported For more info, see Browser compatibility on MDN.
In Google Chrome in version 19 the solution from @spliter stopped working. As @johnnymire pointed out, history.state in Chrome 19 exists, but it’s null. My workaround is to add window.history.state !== null into checking if state exists in window.history: var popped = (‘state’ in window.history && window.history.state !== null), initialURL = location.href; I tested it … Read more