Changing History with HTML 5
Here’s the demo for those who like to jump right in.
The URL is an important piece of user experience in any Web site or application. We like using, what we call “talking URLs” so they’re easy to say and remember, like clearleft.com/is/richardrutter (one of the best all time).
But as we build complex ajax and javascript-base apps with wild interfaces, we sometimes forget about the URL and just how important it is.
The HTML 5 History API aims to deal with that problem by letting you access the address bar directly and create pushes to change the URL and inject (same domain) history into the browser.
Feature detection
Step 1 to using any of the new HTML 5 goodies is testing for support. The History API works where you would expect it to (Gecko & Webkit, not sure about IE9). Testing for support is pretty basic:
Regular JS
if (typeof history.pushState !== "undefined") {
//history api is supported
}With modernizr
if (Modernizr.history) {
// history api is supported
}The History Push
if (typeof history.pushState !== "undefined") {
history.pushState([state to track], '[page title]', '[pushed URL]');
}The pieces
State: This data will be passed into the “popstate”, which deal with things like when the user click the back button.
Page title: This is the title that you see when you click and hold the back button (the menu that pops up) – not totally supported yet
Pushed URL: this is the url you want to display in the address bar. It’s only limitation is that is has to be in the same domain (security).
Worked out history push
if (typeof history.pushState !== "undefined") {
history.pushState(null, 'I love dogs', 'dogsrock.html');
}In this demo, you can see the URL changing but the page not reloading.
This is basically a slimmed down version of the Dive in HTML5 documentation with some modifications to the history code, I slimmed down the detection a bit.
As usual, any comments, questions, criticisms are welcome. I left the back button broken so you can see it actually working.
Both comments and pings are currently closed.
« Creating a Unique and Scalable Mobile Experience | Future of Web Design 2011 »
|
Comments (7)
|
Not sure I understand why you would want the address bar to display an address that is different than the contents of the actual page. If you view “dog” then “cat” and click the back button wouldn’t the viewer expect to see “dog”?
How can history.js be modified to inject the content of the requested page?
The correct content is being injected with an ajax call to the page (dog.php) – might be tough to catch – as the URL changes. I left the back button broken broken for purposes of the demo so you could see the focused URL change independently
How can the back button be fixed to work properly? What are the changes to the code?
Basically you would setup an event listener to watch the popstate event (http://mzl.la/niC7cr) and when that event is fired, then execute the code to then load the appropriate content for that state. So in your example, when you view “dog” then “cat”, then click back, the popstate event would fire and you could then inspect the history entry state to see that the “dog” state was requested and reload that content via AJAX.
I’ll try and put together another demo this weekend, but yea, that’s basically it. There’s some more info at http://diveintohtml5.org/history.html
There might be a typo here:
“In this demo, you can see the URL changing *bug* the page not reloading.”
It might be:
“In this demo, you can see the URL changing *but* the page not reloading.”
nice catch, thanks!