Cross-Browser Considerations

As always, use feature detection to handle differences in support across browsers. Since most of HTML5 History involves events and properties, the only new parts that truly require detection are calls to pushState and replaceState:

function stopDrawing() {

var state = context.getImageData(0, 0, canvas.width, canvas.height);

if (history.pushState)

history.pushState(state, "");

/* ... */

}

Such detection will at least keep your script from failing in older browsers. Depending on your scenario, you may want to start with full-page navigations and upgrade to dynamic content when HTML5 History is supported. Alternatively, you can use a history framework or polyfill to keep the back button working, but keep in mind that not everything can be emulated. For example, dynamic control over the path and query components of an URL can only be achieved via pushState and replaceState.

Note that some browsers support an earlier draft of HTML5 History with two notable differences from the current draft:

• The popstate event fires even during page load
• The history.state property does not exist

In order to support these browsers, you can fall back to reading the state information off the popstate event itself.