[Blog Post] How To Modify Current URL Without Reloading or Redirection Using JavaScript(location.hash, history.pushState, history.replaceState)

Hi everybody,

In previous post, we talked about Knockout.js. Today, we are going to deal with how to change current URL without reflesh the page.

Actually, a lot of companies are using this operation which are facebook, wordpress, translate.google, and other web sites which uses single page application or kind of single page web sites. For example, In facebook, while you take a look the pictures of one of your friends or/and pages you likes, you can see what’s happening on the URL after you change another picture. Another, WordPress blogs, also mine’s, have a good paging. This paging brings the rest of pages one by one through scrolling instead of clicking the next or previous button. Morever, generally, A single Page Application(SPA) comprises only one page! So that, there is not any changing on the URL until you change it. Enough talking,  Let’s write some code!

Create An ASP.NET MVC 4 Project with Basic Template Using Razor and Name it as “ModifyCurrentURL“

Add A Controller With “Empty MVC Controller” toYour Project and Name it “Home“

Add A View as “Index“

Reference jQuery library and form your View like this:

Add following codes inside “btnLocationHash click function“

//btnLocationHash => Code here
window.location.hash = 'messages/mcansozeri';

Run the application and click the (Location Hash)Button. You’ll see not only that the URL is a localhost:portNo/messages/mcansozeri but also when you click, there is a hash tag (#) in the URL like “http://localhost:60997/#messages/mcansozeri“

Fistly, these kind of URLs are not user friendly. Also, if you use ASP.NET MVC like this sample, you should create a route for perfect match. Otherwise, you may in trouble 😀 On the other hand, “window.location.hash” works all major browsers even IE6+.

If we update the JavaScript codes as “window.location.hash = ‘/messages/mcansozeri‘”, the result will be “http://localhost:60997/#/messages/mcansozeri“. Even though you set a sharp symbol(#) to your window.location.hash, there is not going to change anything so that The URL will be same as before.

Let’s change browser’s history with “pushState“

Add following codes inside “btnPushState click function”

window.history.pushState("state", "title", "messages/mcansozeri");

Now re-run the application, click the “Push State Button” and take a look the URL

Two things you may have realized on the page which are:

• the URL does not contain sharp symbol(#)
• there is a history on the browser when click the button (the back button is active!)

And then, click the “Push State Button” more than two times.

To fix this repeating is to change pushState’s URL as “/messages/mcansozeri”

Calling pushState() is similar to setting window.location, they both will also create and active another history the current page. But pushState() has a few advantanges;

Setting window.location does not keep you at the same page. window.location does if you modify only the hash. You can create a new history entry with pushState(), even if the new URL different from the old URL.

What you need to to last thing is to try to use “replaceState” through following codes;

window.history.replaceState(null, "Title", "/messages/mcansozeri");

Run the application again and watch the page out

history.replaceState() works exatcly like history.pushState() except that the replaceState() modifies the current history instead of creating a new history.

Conclusion

window.location.hash can operates by all major browsers FF, Chrome, Safari, Opera, IE6+ as well. But history.replaceState() and history.pushState() are a property of HTML 5 so that you can not work it on from IE6 to IE9. It only works major browsers which are Chrome 5+, FF4+, IE10, Opera 11.50, Safari 5.0.

You benefit from this properties(pushState, replaceState) using history.js. 

More information:

• https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
  
• http://stackoverflow.com/questions/5030564/how-can-i-use-window-history-pushstate-safely
• http://www.oshyn.com/_blog/General/post/JavaScript_Navigation_using_Hash_Change/
• http://stackoverflow.com/questions/2295845/how-can-i-remove-the-location-hash-without-causing-the-page-to-scroll

Download

Click here