About Window history replacestate
ButtonsThe reload buttonBookmarks and elements (both directly by users, and programmatically via element.click() etc.) elements (both directly by users, and programmatically via element.submit() etc.)As a special case of the above, the target="nameOfSomeWindow" attribute on , , and will navigate a window whose window.name is nameOfSomeWindowThe Refresh HTTP response headerThe window.location setter, the various location.* setters, and the location.replace(), location.assign(), and location.reload() methods. Note that these can be called from other frames, including cross-origin ones.Calling window.open(url, nameOfSomeWindow) will navigate a window whose window.name is nameOfSomeWindowhistory.back(), history.forward(), and history.go()history.pushState() and history.replaceState()navigation.back(), navigation.forward(), navigation.traverseTo()navigation.navigate(), navigation.reload()document.open()Cross-document navigations are navigations where, after the navigation completes, you end up in a different Document object than the one you are curently on. Notably, these unload the old document, and stop running any JavaScript code from there.Same-document navigations are ones where, after the navigation completes, you stay on the same Document, with the same JavaScript environment.Most navigations are cross-document navigations. Same-document navigations can happen due to:Any of the above navigation mechanisms only updating the URL's fragment, e.g. location.hash = "foo" or clicking on or calling history.back() after either of those two actionshistory.pushState() and history.replaceState()document.open()Intercepting a cross-document navigation using the navigation object's navigate event, and calling event.intercept()Here's a summary table:TriggerCross- vs. same-documentFires navigate?e.userInitiatede.cancelablee.canInterceptBrowser UI (back/forward)EitherYesYesYes ❖Yes †*Browser UI (non-back/forwardfragment change only)SameYesYesYesYesBrowser UI (non-back/forwardother)CrossNo———// (target="_self" or no target="")EitherYesYes ‡YesYes *//(non-_self target="")EitherYes ΔYes ‡YesYes *Either ◊YesNoYesYes *Refresh headerEither ◊YesNoYesYes *window.locationEitherYes ΔNoYesYes *history.{back,forward,go}()EitherYesNoYes ❖Yes †*history.{pushState,replaceState}()SameYesNoYesYesnavigation.{back,forward,traverseTo}()EitherYesNoYes ❖Yes †*navigation.navigate()EitherYesNoYesYes *navigation.reload()CrossYesNoYesYeswindow.open(url, "_self")EitherYesNoYesYes *window.open(url, name)EitherYes ΔNoYesYes *document.open()SameNo———† = No if cross-document‡ = No if triggered via, e.g., element.click()* = No if the URL differs from the page's current one in components besides path/query/fragment, or is cross-origin from the current page and differs in any component besides fragment.Δ = No if cross-document and initiated from a cross origin-domain window, e.g. frames['cross-origin-frame'].location.href = ... or ◊ = fragment navigations initiated by or the Refresh header are only same-document in some browsers: whatwg/html#6451❖ = Only in the top window, if the traversal is same-origin, and either the traversal is not user-initiated, or there is a consumable user activation in the current window.See the discussion on restrictions to understand the reasons why the last few columns are filled out in the way they are.As a final note, we only fire the navigate event when navigating to URLs that have a fetch scheme. Notably, this excludes navigations to javascript: URLs.Spec details: the above comprehensive list does not fully match when the
Key features of the Window history replacestate that are enabled through these drivers include:
- History replaceState problem in AJAXified Wordpress Theme
- History replaceState no longer working in Chrome for local file
- angular - ng build failed to execute 'replaceState' on 'History': A
- History API: replaceState: Whether the - Can I use
- History API in Safari - pushState / replaceState - state undefined
- SecurityError: replaceState cannot update history to a URL which
- Rewriting browser history – when to use pushState() versus replaceState()
I'm submitting a bug reportLibrary Version:1.1.0Please tell us about your environment:Operating System:OSX 10.xNode Version:8.9.4NPM Version:5.6.0JSPM OR Webpack AND VersionN/ABrowser:Safari latest | iOS Safari latestLanguage:N/ACurrent behavior:Strictly not aurelia bug, but a Webkit bug. this.history.replaceState(state, null, null); The replaceState doesn't work properly on Safari (on both macOS and iOS) when is in use. It manifested as malfunctioned browser back/forward buttons in aurelia app with pushState turned on.aurelia/router#574To reproduce the issue on Mac, create index.html file with content test "> test Serve the static file with http-server in the file directory (npm install -g http-server).Open with Mac Safari, do following in dev console (one by one, not in one shot).history.pushState({}, "", "/one"); // browser url shows null, null); // or ({}, "", null) or ({}, "") or ({}, null)history.pushState({}, "", "/two"); // browser url shows // oops, browser url shows instead of bypass this Safari bug, you have to feed current url back to replaceState:const url = document.location.pathname + document.location.search + document.location.hash;history.replaceState({}, null, url); // or ({}, "", url)Expected/desired behavior:What is the expected behavior?Expect back/forward buttons on Safari to work.What is the motivation / use case for changing the behavior?The proposed dirty fix is to bypass Webkit bug, maybe should only apply to Safari?cc @jwx @davismj
