Search code examples
javascriptpage-refreshhashtag

Page refresh from address bar with #hash

Situation:

url: http://mydomain.com/test.html#somehash

test script:

$(document).ready(function () {
    console.log("page initiated");
    if (window.location.hash) {
        console.log("hash changed (if-statement)");
    }

    $(window).on("hashchange", function () {
        console.log("hash changed (on statement)");
    });

});

The script can also be found on fiddle, but the environment is not suitable to display the behavior.

The problem I get is when I click on the browser addressbar and hit enter without any changes.

  1. When the browser url has a hashtag, the page is not re-initiated. document.ready does not get fired and I do not get any console messages.

  2. When the browser url does not have a hashtag, the page does get re-initiated and document.ready is fired.

Does anybody have an explanation for this behavior and can it be caught so that in situation 1 the page does get reloaded? Is there documentation somewhere, because I can't seem to find any?

Solution

  • This is desired behaviour. If your URL contains a hash string, it's not supposed to initiate a full page refresh.

    Adding a hash to a URL indicates you mean to navigate within the page, not navigate to a new page. Clicking the "refresh" button indicates you want to re-request the document. Pressing enter on the URL bar and clicking refresh are very different things.