Handle URL fragment identifier (anchor) change event in Javascript

by

Google Custom Search Engines use a timer to check the hash against a previous value, whilst the child iframe on a seperate domain updates the parent’s location hash to contain the size of the iframe document’s body. When the timer catches the change, the parent can resize the iframe to match that of the body so that scrollbars aren’t displayed.

Something like the following achieves the same:

var storedHash = window.location.hash;
window.setInterval(function () {
    if (window.location.hash != storedHash) {
        storedHash = window.location.hash;
        hashChanged(storedHash);
    }
}, 100); // Google uses 100ms intervals I think, might be lower

Google Chrome 5, Safari 5, Opera 10.60, Firefox 3.6 and Internet Explorer 8 all support the hashchange event:

if ("onhashchange" in window) // does the browser support the hashchange event?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }

and putting it together:

if ("onhashchange" in window) { // event supported?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }
}
else { // event not supported:
    var storedHash = window.location.hash;
    window.setInterval(function () {
        if (window.location.hash != storedHash) {
            storedHash = window.location.hash;
            hashChanged(storedHash);
        }
    }, 100);
}

jQuery also has a plugin that will check for the hashchange event and provide its own if necessary – http://benalman.com/projects/jquery-hashchange-plugin/.

EDIT: Updated browser support (again).

More Related Contents:

  1. How can I detect changes in location hash?
  2. event.preventDefault() vs. return false
  3. What is DOM Event delegation?
  4. window.onload vs document.onload
  5. Change the URL in the browser without loading the new page using JavaScript
  6. How can I capture the right-click event in JavaScript? [duplicate]
  7. How can I trigger an onchange event manually? [duplicate]
  8. DOM event precedence
  9. Detecting Back Button/Hash Change in URL
  10. event.preventDefault() vs. return false (no jQuery)
  11. Accessing an object’s property from an event listener call in JavaScript
  12. jQuery equivalent of JavaScript’s addEventListener method
  13. Capture click on div surrounding an iframe
  14. Are event handlers in JavaScript called in order?
  15. Implementing jQuery’s “live” binder with native Javascript
  16. Handling “onclick” event with pure JavaScript
  17. JavaScript add events cross-browser function implementation: use attachEvent/addEventListener vs inline events
  18. Is event a global variable that is accessible everywhere inside the callback chain?
  19. visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar
  20. How to get the mouse position without events (without moving the mouse)?
  21. Javascript domready?
  22. How do I normalize the CSS3 transition end events across browsers?
  23. How to make HTML element resizable using pure Javascript?
  24. Javascript trick for ‘paste as plain text` in execCommand
  25. Using this inside an event handler
  26. How does facebook rewrite the source URL of a page in the browser address bar?
  27. Can multiple event listeners/handlers be added to the same element using Javascript?
  28. onchange event not fire when the change come from another function
  29. Is it possible to catch browser’s File Open/Save dialog event using Javascript
  30. Is there a way to detect which side the Alt key was pressed on (right or left)?

Leave a Comment