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