62
js/libraries/balupton-history/demo/native.html
Executable file
62
js/libraries/balupton-history/demo/native.html
Executable file
@@ -0,0 +1,62 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 History API Demo</title>
|
||||
</head>
|
||||
<body>
|
||||
<textarea id="log" style="width:100%;height:400px;margin:1em;"></textarea>
|
||||
<div id="url" style="border:1px black dotted;height:1em;margin:1em;"></div>
|
||||
<div id="buttons" style="margin:1em;"></div>
|
||||
<script type="text/javascript">
|
||||
var $url = document.getElementById('url'), $log = document.getElementById('log');
|
||||
|
||||
window.onpopstate = function(event) {
|
||||
var message =
|
||||
"onpopstate: "+
|
||||
"location: " + location.href + ", " +
|
||||
"data: " + JSON.stringify(event.state) +
|
||||
"\n\n"
|
||||
;
|
||||
|
||||
$url.innerHTML = location.href;
|
||||
$log.innerHTML += message;
|
||||
console.log(message);
|
||||
};
|
||||
|
||||
window.onhashchange = function(event) {
|
||||
var message =
|
||||
"onhashchange: "+
|
||||
"location: " + location.href + ", "+
|
||||
"hash: " + location.hash +
|
||||
"\n\n"
|
||||
;
|
||||
|
||||
$url.innerHTML = location.href;
|
||||
$log.innerHTML += message;
|
||||
console.log(message);
|
||||
};
|
||||
|
||||
// Prepare Buttons
|
||||
var
|
||||
buttons = document.getElementById('buttons'),
|
||||
scripts = [
|
||||
'history.pushState({state:1}, "State 1", "?state=1");',
|
||||
'history.pushState({state:2}, "State 2", "?state=2");',
|
||||
'history.replaceState({state:3}, "State 3", "?state=3");',
|
||||
'location.hash = Math.random();',
|
||||
'history.back();',
|
||||
'history.forward();',
|
||||
'document.location.href = document.location.href.replace(/[\#\?].*/,"");'
|
||||
],
|
||||
buttonsHTML = ''
|
||||
;
|
||||
|
||||
// Add Buttons
|
||||
for ( var i=0,n=scripts.length; i<n; ++i ) {
|
||||
var _script = scripts[i];
|
||||
buttonsHTML +=
|
||||
'<li><button onclick=\'javascript:'+_script+'\'>'+_script+'</button></li>';
|
||||
}
|
||||
buttons.innerHTML = buttonsHTML;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Reference in New Issue
Block a user