HTML5 and pushState

HTML5 pushState - change page and URL attributeNowadays JavaScript and more particularly AJAX is used in every type of web applications. The asynchronous data loading is great asset of AJAX but it has one drawback, the user can’t use back/forward buttons of the browser to navigate through different states of the page that has been updated through asynchronous methods.


Web page Hash

There’s been a solution to the problem, not very elegant, but good for workaround. Many people and developers used to use the hash key to enable users to use the browser navigation buttons. One of the big players on the web scene, Facebook and Twitter, use this approach as well. The following links show how they have implemented it:!/1268351609111/35834/1839468655!/yysource

What is specific in the following examples is that they use hash key in the URL but also they have a separator: “!” this one makes sure that the following data has to be parsed in their application. You could use something like: explode(‘/’, $hash); to het all parts of the URL. In same time each different hash provides different URL for the browser and enables the navigation buttons so the user can go back and forth in the browser history. For jQuery there is a plugin thet enables you to use the hash and the browser history:

But now with HTML5 raise we have new option and solution for the former problem. HTML5 and in particular W3C has announced new document features and methods: jQuery History Plugin. Also there is pretty simple implementation of this functionality:
[cc escaped=”true” lang=”javascript”]$(function(){
// Initialize Tabs
if(document.location.hash!=”) {
//get the index from URL
tabSelect = document.location.hash.substr(1,document.location.hash.length);

HTML5 pushState



With these two options web developers can change the state of the page on-the-fly based on any event that occures on the page that the user is browsing. You can change the page title, URL and the state object which can be serialized and save on the client computer.
[cc escaped=”true” lang=”javascript”>$(“.link”).click(function() {
var stateObj = { test: “1” };
history.pushState(stateObj, “Tab 2”, “tab2.html”);
The former code will update the page URL the title will be changed to “Tab 2” and the state object parameter “test” will be set to 1. Thus if you have a image slider or tabbed content every time the user click on any of the tabs you can update the document state.
[cc escaped=”true” lang=”text”]
The only problem is that the pushState is not supported by all browsers. At the time of writing the latest versions of Chrome and Firefox supported this functionality hopefully sooner than later will see all browser supporting HTML5 and will be able to use its full power and features.

Further reading


Just a guy with strong interest in PHP and Web technologies

Tagged with: , , , ,
5 comments on “HTML5 and pushState
  1. After study a few of the blog posts on your website now, and I truly like your way of blogging. I bookmarked it to my bookmark website list and will be checking back soon. Pls check out my web site as well and let me know what you think.

  2. how to make a website for free says:

    I have been surfing online more than three hours today,
    yet I never found any interesting article like yours.
    It is pretty worth enough for me. In my view, if all
    web owners and bloggers made good content as you did,
    the internet will be much more useful than ever
    before. Check out my website to get more info about work from
    home, if you like.

  3. seo campaign plan says:

    Always pleasant to find a new blog this great! I will be coming back
    here for certain!

  4. QNUPS says:

    Yin Yang Source! Excellent!!

  5. Javid Sinha says:

    Hey there! Do you know if they make any plugins to safeguard against hackers?
    I’m kinda paranoid about losing everything I’ve
    worked hard on. Any tips?

Leave a Reply to Gail Sleighter Cancel reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.