How to reload a page after URL hash change in JavaScript?

Web Development
1

I am building a web app, Where I want to do a few auto-complete tasks. For example, a tutorial on how to use the app. I want to change the URL hash on each step, check the hash and load the next content. But when I change the URL hash, the page does not reload and my code does not run a second time.

if( location.hash == '#step2' ){
     // Show Tutorial

}

So, how can I reload the page after the URL hash change?

2

You don’t actually need to reload the page to run the next step. You can set up a window.onhashchange event handler and write your logic there.

window.onhashchange = function() {
    if( location.hash == '#step2' ){
         // Show Tutorial
    }
}

This function will run every time the hash value changes. Anyway if you still want to reload the page you can do so by putting location.reload() inside the window.onhashchange event.

window.onhashchange = function() {
    location.reload()
}