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:

1
2
3
4
5
6
7
8
9
$(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.

1
2
3
4
$(".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.

1
2
3
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: , , , ,

10 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?

  6. Noel 25. Dec, 2012 at 9:30 pm #

    It is appropriate time to make a few plans for the longer term
    and it’s time to be happy. I have learn this put up and if I could I wish to counsel you few interesting issues or tips. Perhaps you could write subsequent articles referring to this article. I want to learn more issues approximately it!

  7. Devin 19. Jul, 2013 at 6:04 pm #

    I constantly spent my half an hour to read this weblog’s content every day along with a cup of coffee.

  8. deskspace 04. Aug, 2013 at 12:23 pm #

    Howdy! I’m at work surfing around your blog from my new iphone 4! Just wanted to say I love reading through your blog and look forward to all your posts! Keep up the outstanding work!

  9. independent.academia.edu 30. Dec, 2013 at 12:02 am #

    Hey just wanted to give you a quick heads up. The
    text in your content seem to be running off the screen in Firefox.
    I’m not sure if this is a format issue or something to do with
    browser compatibility but I figured I’d post to let you know.

    The design look great though! Hope you get the problem solved soon.
    Cheers

    • SANDO 20. Feb, 2014 at 8:35 pm #

      Hi thanks for the heads up, I changed the code highlighter plugin and that broke it.

Leave a Reply