Cross-browser jquery ajax history with window.history.pushState and fallback

Question

I want to implement a navigation history using jQuery and AJAX in a cross-browser manner. My approach is to use window.history.pushState and fall back to a hash url /#!/url in browsers that do not support window.history.pushState.

For example:

<a href="/home">home</a> <a href="/about">about</a> <a href="/contact">contact</a> 

On browsers that support window.history.pushState, clicking on one of these links should change address without page refresh to http://domain.com/home, http://domain.com/about etc. When the browser does not support window.history.pushState, it should use a fragment identifier, i.e: http://domain.com/#!/home, http://domain.com/#!/about.

---

Update: Based on the feedback here I have implemented Ajax SEO (git) that uses jQuery Address for HTML5 History API with old browser fallback to /#!/url.

Answer 1

// Assuming the path is retreived and stored in a variable 'path'  if (typeof(window.history.pushState) == 'function') {     window.history.pushState(null, path, path); } else {     window.location.hash = '#!' + path; } 

Answer 2

Something i've been using with fallback hash URL's:

History = History || {}; History.pathname = null; History.previousHash = null; History.hashCheckInterval = -1; History.stack = []; History.initialize = function () {     if (History.supportsHistoryPushState()) {         History.pathname = document.location.pathname;         $(window).bind("popstate", History.onHistoryChanged);     } else {         History.hashCheckInterval = setInterval(History.onCheckHash, 200);     } }; History.supportsHistoryPushState = function () {     return ("pushState" in window.history) && window.history.pushState !== null; }; History.onCheckHash = function () {     if (document.location.hash !== History.previousHash) {         History.navigateToPath(document.location.hash.slice(1));         History.previousHash = document.location.hash;     } }; History.pushState = function (url) {     if (History.supportsHistoryPushState()) {         window.history.pushState("", "", url);     } else {         History.previousHash = url;         document.location.hash = url;     }     History.stack.push(url); }; History.onHistoryChanged = function (event) {     if (History.supportsHistoryPushState()) {         if(History.pathname != document.location.pathname){             History.pathname = null;             History.navigateToPath(document.location.pathname);         }     } }; History.navigateToPath = function(pathname) {     History.pushState(pathname);      // DO SOME HANDLING OF YOUR PATH HERE  }; 

You could bind your click events to this with:

$(function(){     $("a").click(function(){         var href = $(this).attr('href');         History.navigateToPath( href )         return false;     }); }); 

If you need some more explanation on this example i'll be glad to hear it.

---

EDIT

Please see my other answer.