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:

http://www.facebook.com/media/set/#!/1268351609111/35834/1839468655

http://twitter.com/#!/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:

$(function(){
    // Initialize Tabs
    $('#my-tabs').tabs();
    if(document.location.hash!='') {
        //get the index from URL
        tabSelect = document.location.hash.substr(1,document.location.hash.length);
        $("#my-tabs").tabs('select',tabSelect-1);
    }
});

HTML5 pushState

- pushState

- replaceState

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.

$(".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.

http://yysource.com/tab1.html

http://yysource.com/tab2.html

...

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

http://ajaxian.com/archives/pushstate-node-js-on-the-server-side

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#history

http://blog.new-bamboo.co.uk/2011/2/2/degradable-javascript-applications-using-html5-pushstate

http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate

http://stackoverflow.com/questions/3722815/does-internet-explorer-support-pushstate-and-replacestate

Post to Twitter Post to Yahoo Buzz Post to Delicious Post to Digg Post to Facebook Post to Google Buzz Send Gmail Post to LinkedIn Post to MySpace Post to Reddit Post to StumbleUpon Post to Technorati

Tags: , , , ,

5 Responses to “HTML5 and pushState”

  1. Gail Sleighter 14. Aug, 2011 at 8:01 am #

    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 06. Aug, 2012 at 2:37 pm #

    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 19. Sep, 2012 at 8:27 pm #

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

  4. QNUPS 22. Sep, 2012 at 9:08 pm #

    Yin Yang Source! Excellent!!

  5. Javid Sinha 22. Dec, 2012 at 8:08 am #

    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