Playing Nicely with Other APIs

Many interesting APIs that started out as part of the HTML5 specification
were eventually spun off into their own projects. Others have
become so associated with HTML5 that sometimes its hard for developers
(and even authors) to really tell the difference. In this chapter,
well talk about those APIs. Well spend a little time working with the
HTML5 history API, and then well make pages on different servers talk
with Cross-document Messaging, Then well look at We b Sockets and
Geolocation, two very powerful APIs that can help you make even more
interactive applications.
Well use the following APIs to build those applications:1
History
Manages the browser history. [C5, S4, IE8, F3, O10.1 IOS3.2, A2]
Cross-document Messaging
Sends messages between windows with content loaded on different
domains. [C5, S5, F4, IOS4.1, A2]
We b Sockets
Creates a stateful connection between a browser and a server. [C5,
S5, F4, IOS4.2]
Geolocation
Gets latitude and longitude from the clients browser. [C5, S5,
F3.5, O10.6, IOS3.2, A2]
1. In the descriptions that follow, browser support is shown in square brackets using
a shorthand code and the minimum supported version number. The codes used are C:
Google Chrome, F: Firefox, IE: Internet Explorer, O: Opera, S: Safari, IOS: iOS devices
with Mobile Safari, and A: Android Browser.
www.it-ebooks.info
PRESERVING HISTORY 197
23 Preserving History
The HTML5 specification introduces an API to manage the browser history.
2 In Creating an Accessible Updatable Region, on page 104, we built
a prototype for AwesomeCos 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 theres no support for the browsers
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:
Download html5history/javascripts/application.js
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:
Download html5history/javascripts/application.js
Line 1 $("nav ul" ).click(function(event){
- target = $(event.target);
- if(target.is("a" )){
- event.preventDefault();
5 if ( $(target.attr("href" )).hasClass("hidden" ) ){
-
- if(supportsHistory()){
- var tab = $(target).attr("href" );
- var stateObject = {tab: tab};
10 window.history.pushState(stateObject, tab);
- };
-
- $(".visible" ).removeClass("visible" ).addClass("hidden" ).hide();
- $(target.attr("href" )).removeClass("hidden" ).addClass("visible" ).show();
15 };
- };
- });
-
- });
2. http://www.w3.org/TR/html5/history.html
Report erratum
this copy is (P1.0 printing, December 2010)
www.it-ebooks.info
PRESERVING HISTORY 198
We snag the ID of the element thats visible, and then we add a history
state to the browser. The first parameter of the pushstate() method is an
object that well be able to interact with later. Well 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, well 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; its
just a way to identify the entry in the browsers history. Well use the ID
of the tab again.
Retrieving the Previous State
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 gets fired. We use this hook to display the
tab we stored in the state object.
Download html5history/javascripts/application.js
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. We should refactor this to remove the
duplication.
Defaulting
When we first bring up our page, our history state is going to be null,
so well need to set it ourselves. We can do that right above where we
defined our window.onpopstate( ) method.
Report erratum
this copy is (P1.0 printing, December 2010)
www.it-ebooks.info
PRESERVING HISTORY 199
Download html5history/javascripts/application.js
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 browser history.3
Falling Back
This works in Firefox 4 and Safari 4, as well as in Chrome 5, but it
doesnt work in Internet Explorer. Solutions like the jQuery Address
plug-in4 provide the same functionality, but we wont go into implementing
that as a fallback solution because its 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
youll be able to easily provide much more us