Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

History.pushState and page refresh

Tags:

javascript

I started looking at HTML5 new history API

However, I have one question. How can one handles the page refresh?

For example a user clicks a link, which is handled by a js function, which

asynchronously loads the content of the page

changes the URL with history.pushState()

The the user refreshes the page, but the URL of course does not exist on the server

How do you handle situations like this? With the hash solution there was no issue there

Thanks

like image 726
Thomas Avatar asked Aug 15 '11 16:08

Thomas


People also ask

Does history pushState refresh the page?

The history. pushState() method can be used to push a new entry into the browser's history—and as a result, update the displayed URL—without refreshing the page. It accepts three arguments: state , an object with some details about the URL or entry in the browser's history.

What does Window history pushState do?

The history. pushState() method allows you to add an entry to the web browser's session history stack.

What is the difference between pushState and replaceState?

The big difference is, that while pushState will create a new entry in the browser's history, replaceState will only replace the current state. As a side effect of this, using the replaceState method will change the URL in the address bar, without creating a new history entry.

What is window history replaceState?

replaceState() The History. replaceState() method modifies the current history entry, replacing it with the state object and URL passed in the method parameters. This method is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.


1 Answers

This does require the server-side support. The ideal use of .pushState is to allow URLs from JavaScript applications to be handled intelligently by the server.

This could be either by re-serving the same JavaScript application, and letting it inspect window.location, or by rendering the content at that URL on the server as you would for a normal web application. The specifics obviously vary depending on what you're doing.

like image 119
Jeremy Avatar answered Sep 29 '22 23:09

Jeremy