native-auto.html 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <script type="text/javascript">
  6. (function(){
  7. window.onpopstate = function(event) {
  8. console.log("onpopstate: location: " + document.location.href + ", data: " + JSON.stringify(event.state));
  9. };
  10. window.onhashchange = function(event) {
  11. console.log("onhashchange: location: " + document.location.href);
  12. };
  13. setTimeout(function(){
  14. history.pushState({page: 1}, "title 1", "?page=1");
  15. },1e3);
  16. setTimeout(function(){
  17. history.pushState({page: 2}, "title 2", "?page=2");
  18. },2e3);
  19. setTimeout(function(){
  20. history.replaceState({page: 3}, "title 3", "?page=3");
  21. },3e3);
  22. setTimeout(function(){
  23. document.location.hash = 'asd';
  24. },4e3);
  25. setTimeout(function(){
  26. history.back(); // alerts "location: http://example.com/example.html?page=3#asd, state: {"page":3}"
  27. },5e3);
  28. setTimeout(function(){
  29. history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
  30. },6e3);
  31. setTimeout(function(){
  32. history.back(); // alerts "location: http://example.com/example.html, state: null
  33. },7e3);
  34. setTimeout(function(){
  35. history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
  36. },8e3);
  37. })();
  38. </script>
  39. </body>
  40. </html>