replaceState(): a history state with url ... cannot be created in a document with origin

html html5-history
Airikr picture Airikr · Sep 8, 2014 · Viewed 18.3k times · Source

I have window.history.replaceState(null, null, 'about'); in main.js which are located in required/javascripts on my server.

Then on the about page (located in / (root) on my server), I have a link that uses window.history.replaceState(null, null, 'about:me'); on this page. Everything works fine, but when I click on another link with the same function but with about:girlfriend as URL, I'm getting this error message:

Uncaught SecurityError: Failed to execute 'pushState' on 'History': A history state object with URL 'about:girlfriend' cannot be created in a document with origin 'http://my.domain.com'.

I don't know why my browser (latest version of Chrome) think I'm trying to reach this page using pushState and I don't know why I'm getting this error message, no matter how many times I've read it. Can someone please explain this for me? I do not use History.js for this.

Worth mention, is that I'm not getting this error message if I change : to something else, like - or /. I want to use : because / is not working (404 Page Not Found) and - doesn't fit in - it's better with :.

Answer

user5258091 picture user5258091 · Aug 23, 2015

If you are trying to do this locally, the following works for both locally and remote loaded pages: 

history.replaceState(null,null, window.location.pathname + "your thing here")

Related questions

Good tutorial for using HTML5 History API (Pushstate?)

I am looking into using the HTML5 History API to resolve deep linking problems with AJAX loaded content, but I am struggling to get off the ground. Does any one know of any good resources? I want to use this …

Read More
Appending parameter to URL without refresh

I know this has been asked many times before but answers were not descriptive enough to solve my problem. I don't want to change the whole URL of page. I want to append a parameter &item=brand on button …

Read More
Ajax with history.pushState and popstate - what do I do when popstate state property is null?

I'm trying out the HTML5 history API with ajax loading of content. I've got a bunch of test pages connected by relative links. I have this JS, which handles clicks on those links. When a link is clicked the handler …

Read More