Handle Url Fragment Identifier (Anchor) Change Event in JavaScript

Handle URL fragment identifier (anchor) change event in Javascript

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

How to monitor the changes in the url (Fragment identifier - the anchor portion of a URL )

Here is another good read: Restoring Conventional Browser Navigation to AJAX Applications

Excerpt from the article:

Many developers have adopted AJAX as a
way to develop rich web applications
that are almost as interactive and
responsive as desktop applications.
AJAX works by dividing the web UI into
different segments. A user can perform
an operation on one segment and then
start working on other segments
without waiting for the first
operation to finish.

But AJAX has a major disadvantage; it
breaks standard browser behavior, such
as Back, Forward, and bookmarking
support. Rather than forcing users to
adapt to AJAX's shortcomings,
developers should make their AJAX
applications comply with the
traditional web interaction
style,.......

How to detect if URL has changed after hash in JavaScript

In modern browsers (IE8+, FF3.6+, Chrome), you can just listen to the hashchange event on window.

In some old browsers, you need a timer that continually checks location.hash. If you're using jQuery, there is a plugin that does exactly that.

Example

Below I undo any URL change, to keep just the scrolling:

<script type="text/javascript">
  if (window.history) {
    var myOldUrl = window.location.href;
    window.addEventListener('hashchange', function(){
      window.history.pushState({}, null, myOldUrl);
    });
  }
</script>

Note that above used history-API is available in Chrome, Safari, Firefox 4+, and Internet Explorer 10pp4+

javascript url hashtag change unload event doesn't work

Because the page isn't unload. The hash is used to anchor elements or to design a single page layout for all application. You must to change your event to hashchange

  $(window).on('hashchange', function() {
    // stuff
  });

List of valid characters for the fragment identifier in an URL?

See the RFC 3986.

fragment    = *( pchar / "/" / "?" )
pchar         = unreserved / pct-encoded / sub-delims / ":" / "@"    
unreserved    = ALPHA / DIGIT / "-" / "." / "_" / "~"
pct-encoded   = "%" HEXDIG HEXDIG
sub-delims    = "!" / "$" / "&" / "'" / "(" / ")"
                 / "*" / "+" / "," / ";" / "="

So you can use !, $, &, ', (, ), *, +, ,, ;, =, something matching %[0-9a-fA-F]{2}, something matching [a-zA-Z0-9], -, ., _, ~, :, @, /, and ?

Javascript function on url change of page

Something like this should work:

<script type="text/javascript">
function hashChanged(locationHash) {
    if(locationHash == "#SafeConversion") {
        status0();
    } else if(locationHash == "#FlasherUnit") {
        status1();
    } else if(locationHash == "#ExactPower") {
        status2();
    } else if(locationHash == "#ExactPower") {
        status2();
    } else if(locationHash == "#YourSolution") {
        status3();
    } else if(locationHash == "#YourSolution2") {     
        status3();
    } else if(locationHash == "#YourSolution2/1") {     
        status3();
    } else if(locationHash == "#YourSolution3") {     
        status3();
    } else if(locationHash == "#YourSolution3/1") {     
        status3();
    } else if(locationHash == "#YourSolution4") {     
        status3();
    } else if(locationHash == "#Contact") {     
        status0();
    } 
}

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);
}

</script>

How can you check for a #hash in a URL using JavaScript?

Simple use of location hash:

if(window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}

---

Related Topics