<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>