javascript

Chapter 21: Upcoming API s
The navigator.onLine property is supported in IE 4 and later, Firefox 2 and later, and Opera 9.5 and
later. Firefox updates this property when the user manually tells the browser to go into offline mode
or when network connectivity is lost (Windows and Linux only). IE versions 4 through 7 change
navigator.onLine only when the user manually changes the browser to or from offline mode. IE 8
also updates the property when network connectivity is lost or restored.
IE 8, Firefox 3, and Opera 9.5 introduced support for the offline and online events in connection to
the navigator.onLine property changing.
Changes to History
One of the big challenges associated with Ajax applications is the lost functionality of the browser ’ s Back
button. Numerous hacks and workarounds have been used to reenable the familiar Back button
functionality that many users are accustomed to. HTML 5 seeks to make this easier by augmenting the
BOM history object.
In an Ajax application, the page may never reload or navigate away to another page, which means that
it ’ s the state of the application that changes rather than the location. HTML 5 adds the pushState()
method to history , allowing you to add state information to the history stack. This method accepts
three arguments: an object containing state information, the title of the state, and an optional URL
indicating how the browser ’ s URL should change to reflect the state. When pushState() is called, the
state information is added to the history stack as if the user had navigated to a new page.
The history stack in HTML 5 can contain a mix of URL and state information. When the Back or Forward
button is clicked, the history stack is popped to determine what to do next. If the next entry in the
history stack is a URL, then the browser navigates to that URL; if the entry is state information, then
a popstate event is fired on the document ’ s body and bubbles up to window . The event object for
popstate has a state property that contains the object that was passed into pushState() . Here is an
example:
//add some state to the history stack
history.pushState({ mode: “edit”}, “Editing”);
//listen for a change in state
EventUtil.addHandler(window, “popstate”, function(event){
});
var state = event.state;
if (mode == “edit”){
//do something
}
At the time of this writing, no browsers have implemented the changes to history. There is still some
question as to how the second argument of pushState() will actually be used, though user agents will
likely use it as the title of the document when the state changes.
693