2010-08-05 17:57:15 +02:00
< title > HTML5 History API< / title >
< style >
2010-08-05 18:53:15 +02:00
#examples {
padding-left: 20px;
}
#examples li {
list-style: square;
padding: 0;
margin: 0;
}
2010-08-05 17:57:15 +02:00
< / style >
< article >
< p id = "status" > HTML5 History API not supported< / p >
2010-08-05 18:53:15 +02:00
< p > < em > Last event fired: < span id = "lastevent" > (none)< / span > < / em > < / p >
2010-08-05 22:20:03 +02:00
< p > To test the History API, click through the urls below. Note that none of these urls point to < em > real< / em > pages. JavaScript will intercept these clicks, load data and the browser address bar will < em > appear< / em > to change - but this is the History API in action!< / p >
2010-08-05 18:53:15 +02:00
< p > Use the back and forward buttons in your browser to navigate the history.< / p >
< ul id = "examples" >
< li > < a href = "/history/first" > first< / a > < / li >
< li > < a href = "/history/second" > second< / a > < / li >
< li > < a href = "/history/third" > third< / a > < / li >
< li > < a href = "/history/fourth" > fourth< / a > < / li >
< / ul >
2010-08-05 19:34:39 +02:00
< p > < small > Note: since these urls aren't real, refreshing the page will land on an invalid url.< / small > < / p >
2010-08-05 18:53:15 +02:00
< div id = "output" > < / div >
2010-08-05 17:57:15 +02:00
< / article >
< script >
2010-08-05 18:53:15 +02:00
var $ = function (s) { return document.getElementById(s); },
state = $('status'),
lastevent = $('lastevent'),
urlhistory = $('urlhistory'),
examples = $('examples'),
output = $('output'),
template = '< p > URL: < strong > {url}< / strong > , name: < strong > {name}< / strong > , location: < strong > {location}< / strong > < / p > ',
data = { // imagine these are ajax requests :)
first : {
name: "Remy",
location: "Brighton, UK"
},
second: {
name: "John",
location: "San Francisco, USA"
},
third: {
name: "Jeff",
location: "Vancover, Canada"
},
fourth: {
name: "Simon",
location: "London, UK"
}
};
function reportEvent(event) {
lastevent.innerHTML = event.type;
}
function reportData(data) {
output.innerHTML = template.replace(/(:?\{(.*?)\})/g, function (a,b,c) {
return data[c];
});
}
2010-08-05 17:57:15 +02:00
2010-08-23 18:55:18 +02:00
if (typeof history.pushState === 'undefined') {
2010-08-05 17:57:15 +02:00
state.className = 'fail';
} else {
state.className = 'success';
state.innerHTML = 'HTML5 History API available';
}
2010-08-05 18:53:15 +02:00
addEvent(examples, 'click', function (event) {
var title;
event.preventDefault();
if (event.target.nodeName == 'A') {
title = event.target.innerHTML;
data[title].url = event.target.getAttribute('href'); // slightly hacky (the setting), using getAttribute to keep it short
history.pushState(data[title], title, event.target.href);
reportData(data[title]);
}
});
2010-08-05 19:34:39 +02:00
addEvent(window, 'popstate', function (event) {
2010-08-05 18:53:15 +02:00
var data = event.state;
reportEvent(event);
reportData(event.state || { url: "unknown", name: "undefined", location: "undefined" });
2010-08-05 19:34:39 +02:00
});
2010-08-05 18:53:15 +02:00
addEvent(window, 'hashchange', function (event) {
reportEvent(event);
// we won't do this for now - let's stay focused on states
/*
if (event.newURL) {
urlhistory.innerHTML = event.oldURL;
} else {
urlhistory.innerHTML = "no support for < code > event.newURL/oldURL< / code > ";
}
*/
});
addEvent(window, 'pageshow', function (event) {
reportEvent(event);
});
addEvent(window, 'pagehide', function (event) {
reportEvent(event);
});
2010-08-05 17:57:15 +02:00
< / script >