mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
63 lines
1.7 KiB
HTML
63 lines
1.7 KiB
HTML
<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>
|