49

I am working on some javascript code, and using window.History.pushState to load new HTML pages, instead of using href tags. My code (which is working fine) looks like this. 

window.History.pushState({urlPath:'/page1'},"",'/page1')

strangely, this fails, ie reloads the browser

window.History.pushState({urlPath:'/page2.php'},"",'/page2.php')

But this works, content is updated, browser not refreshed ! (notice the URL is absolute and not relative)

window.History.pushState({urlPath:'www.domain.com/page2.php'},"",'www.domain.com/page2.php')

The documentation for window.History.pushState says that the third parameter URL can be either absolute or relative -

URL — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts the browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.

Absolute URLs seem to be working but relative seem to be not. Why is this happening?

Timo Tijhof
  • 10,032
  • 6
  • 34
  • 48
Ankit Rustagi
  • 5,539
  • 12
  • 39
  • 70
  • Does this happen for you in all browsers? I use relative paths with `history.pushState` (future readers, note the lowercase `h` in `history`) pretty regularly (and just tried it in Firebug) without ever causing a reload. What other code are you using (as history.pushState doesn't load anything, merely updates history and the address bar)? – Maverick Jun 26 '14 at 06:55
  • This is happening in chrome and firefox. I tested this in the console panel for chrome, so there is no other code which could be causing any problem. This issue is only visible with a few URLS. Could this have anything to do with redirect rules (though the documentation says that relative paths are resolved to absolute paths, thus it should affect both absolute and relative URLs equally, which is not the case) ? – Ankit Rustagi Jun 26 '14 at 07:01
  • Please put your code up somewhere so we can take a look at it. As @MrN00b suggested, the lowercase 'h' for 'history' is important. The following works for me without a page refresh: `$('#buttonID').on('click', function() {window.history.pushState({urlPath:'/page1'},"",'/page1')});` – SimpleAnecdote Jun 26 '14 at 07:07
  • What is the exact code you are putting into the console? Obviously `window.History.pushState({urlPath:'/page2.php'},"",'/page2.php')` will throw an exception (because the code should be `history.pushState(...)`). That line of code will not, by itself ever cause a refresh - it changes the text in the address bar and adds an item to history, nothing else. Redirect rules are normally server-side and therefore are irrelevant (the server doesn't know about client side code). – Maverick Jun 26 '14 at 07:07

3 Answers3

63

The short answer is that history.pushState (not History.pushState, which would throw an exception, the window part is optional) will never do what you suggest.

If pages are refreshing, then it is caused by other things that you are doing (for example, you might have code running that goes to a new location in the case of the address bar changing).

history.pushState({urlPath:'/page2.php'},"",'/page2.php') works exactly like it is supposed to in the latest versions of Chrome, IE and Firefox for me and my colleagues.

In fact you can put whatever you like into the function: history.pushState({}, '', 'So long and thanks for all the fish.not a real file').

If you post some more code (with special attention for code nearby the history.pushState and anywhere document.location is used), then we'll be more than happy to help you figure out where exactly this issue is coming from.

If you post more code, I'll update this answer (I have your question favourited) :).

Maverick
  • 4,449
  • 4
  • 36
  • 46
14

As others have suggested, you are not clearly explaining your problem, what you are trying to do, or what your expectations are as to what this function is actually supposed to do.

If I have understood correctly, then you are expecting this function to refresh the page for you (you actually use the term "reloads the browser").

But this function is not intended to reload the browser.

All the function does, is to add (push) a new "state" onto the browser history, so that in future, the user will be able to return to this state that the web-page is now in.

Normally, this is used in conjunction with AJAX calls (which refresh only a part of the page).

For example, if a user does a search "CATS" in one of your search boxes, and the results of the search (presumably cute pictures of cats) are loaded back via AJAX, into the lower-right of your page -- then your page state will not be changed. In other words, in the near future, when the user decides that he wants to go back to his search for "CATS", he won't be able to, because the state doesn't exist in his history. He will only be able to click back to your blank search box.

Hence the need for the function 

history.pushState({},"Results for `Cats`",'url.html?s=cats');

It is intended as a way to allow the programmer to specifically define his search into the user's history trail. That's all it is intended to do.

When the function is working properly, the only thing you should expect to see, is the address in your browser's address-bar change to whatever you specify in your URL.

If you already understand this, then sorry for this long preamble. But it sounds from the way you pose the question, that you have not.

As an aside, I have also found some contradictions between the way that the function is described in the documentation, and the way it works in reality. I find that it is not a good idea to use blank or empty values as parameters.

See my answer to this SO question. So I would recommend putting a description in your second parameter. From memory, this is the description that the user sees in the drop-down, when he clicks-and-holds his mouse over "back" button.

Community
  • 1
  • 1
cartbeforehorse
  • 3,045
  • 1
  • 34
  • 49
6
window.history.pushState({urlPath:'/page1'},"",'/page1')

Only works after page is loaded, and when you will click on refresh it doesn't mean that there is any real URL.

What you should do here is knowing to which URL you are getting redirected when you reload this page. And on that page you can get the conditions by getting the current URL and making all of your conditions.

Deep Kakkar
  • 5,831
  • 4
  • 39
  • 75
TBI
  • 2,789
  • 1
  • 17
  • 21