safari.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <html>
  2. <head>
  3. <title>Safari Hash ReplaceState History Traversal Bug</title>
  4. </head>
  5. <body>
  6. <p>This demo demonstrates an issue with Safari 5.0.4 (6533.20.27) handing of hashes and replace state. When a hash is set, and then replaced using replaceState the history list are then broken, when traversing back the hash does not change.</p>
  7. <p>Note: The issue requires a clean history list, as such this should always be opened in a new tab/window where there are no prior history items.</p>
  8. <p>Reported by <a href="http://balupton.com">Benjamin Lupton</a> author of <a href="http://github.com/balupton/history.js">History.js</a></p>
  9. <button id="bug">bug</button>
  10. <button id="workaround">workaround</button>
  11. <button id="reset">reset</button>
  12. <textarea id="log" style="width:100%;height:200px;margin-top:1em;"></textarea>
  13. <script type="text/javascript">
  14. (function(){
  15. window.onpopstate = function(event) {
  16. var message = ("onpopstate: location: " + document.location.href);
  17. document.getElementById('log').innerHTML += message+"\n\n";
  18. };
  19. window.onhashchange = function(event) {
  20. var message = ("onhashchange: location: " + document.location.href);
  21. document.getElementById('log').innerHTML += message+"\n\n";
  22. };
  23. document.getElementById('bug').onclick = function(){
  24. setTimeout(function(){
  25. document.location.hash = Math.random();
  26. },1e3);
  27. setTimeout(function(){
  28. history.replaceState(null,'','?blah');
  29. },2e3);
  30. setTimeout(function(){
  31. history.back(); // should take us to the initial page, it doesn't
  32. },3e3);
  33. };
  34. document.getElementById('workaround').onclick = function(){
  35. setTimeout(function(){
  36. history.pushState(null,'','#'+Math.random());
  37. },1e3);
  38. setTimeout(function(){
  39. history.replaceState(null,'','?blah');
  40. },2e3);
  41. setTimeout(function(){
  42. history.back(); // will take us to the initial page
  43. },3e3);
  44. };
  45. document.getElementById('reset').onclick = function(){
  46. document.location.href = document.location.href.replace(/[\#\?].*/,"");
  47. };
  48. })();
  49. </script>
  50. </body>
  51. </html>