Preserving History in Html5

About Preserving History in Html5

The Html5 specification introduces an API to manage the browser history. 2 In Creating an Accessible Updatable Region , we built a prototype for AwesomeCo’s new home page that switched out the main content when we clicked one of the navigation tabs. One drawback with the approach we used is that there’s no support for the browser’s Back button. We can fix that with some hacks, but we will eventually be able to solve it for good with the History API. We can detect support for this API like this to Preserving History in Html5:

function supportsHistory(){
return !!(window.history && window.history.pushState);
}

We use this method whenever we need to work with the History objects. Storing the Current State When a visitor brings up a new web page, the browser adds that page to its history. When a user brings up a new tab, we need to add the new tab to the history ourselves, like this for Preserving History in Html5:

$("nav ul" ).click(function(event){
 target = $(event.target);
 if(target.is("a" )){
 event.preventDefault();
 if ( $(target.attr( "href" )).hasClass("hidden" ) ){

 if(supportsHistory()){
 var tab = $(target).attr( "href" );
 var stateObject = {tab: tab};
 window.history.pushState(stateObject, tab);
 };

 $(".visible" ).removeClass("visible" ).addClass("hidden" ).hide();
 $(target.attr("href" )).removeClass("hidden" ).addClass("visible" ).show();
 };
 };
 });

 });

We snag the ID of the element that’s visible For Preserving History in Html5

 And then we add a history state to the browser. The first parameter of the pushstate() method is an object that we’ll be able to interact with later. W e ’ l use this to store the ID of the tab we want to display when our user navigates back to this point. For example, when the user clicks the Services tab, we’ll store #services in the state object.The second parameter is a title that we can use to identify the state in our history. It has nothing to do with the title element of the page; it’s just a way to identify the entry in the browser’s history. We’ll use the ID of the tab again.Retrieving the Previous State Preserving History in Html5 .Although this adds a history state, we still have to write the code to handle the history state change. When the user clicks the Back button, the window.onpopstate() event

if(supportsHistory()){
window.onpopstate = function(event) {
if(event.state){
var tab = (event.state[ "tab" ]);
$(".visible" )
.removeClass("visible" )
.addClass("hidden" )
.hide();
$(tab)
.removeClass("hidden" )
.addClass("visible" )
.show();
}
};
};

We fetch the name of the tab and then use jQuery to locate the element to hide by its ID. The code that hides and shows the tabs is repeated here from the original code. W e should refactor this to remove the duplication. Defaulting When we first bring up our page, our history state is going to be null, so we’ll need to set it ourselves. We can do that right above where we defined our window.onpopstate( ) method here to Preserving History in Html5.

if(supportsHistory()){
window.history.pushState( {tab: "#welcome" }, '#welcome' );
window.onpopstate = function(event) {
if(event.state){
var tab = (event.state[ "tab" ]);
$(".visible" )
.removeClass("visible" )
.addClass("hidden" )
.hide();
$(tab)
.removeClass("hidden" )
.addClass("visible" )
.show();
}
};
};

Now, when we bring up the page, we can cycle through our tabs using the Preserving History in Html5.

Falling Back With Preserving History in Html5

This works in Firefox 4 and Safari 4, as well as in Chrome 5, but it doesn’t work in Internet Explorer. Solutions like the jQuery Address plug-in4 provide the same functionality, but we won’t go into implementing that as a fallback solution because it’s less of a fallback and more of a complete replacement with a lot of additional features. Keep an eye on browser support for history manipulation, though, because you’ll be able to easily provide much more user-friendly applications when you can use this API in every browser for Preserving History in Html5.

andcombd