How to invoke javascript function when # is present in URL

Question

I am trying to call JavaScript function when # is present in URL. I know normal behavior is to navigate / scroll to the specific tag. But could not find how to invoke a JavaScript function.

The below example is close but not solving my problem.

What is the meaning of # in URL and how can I use that?

`if( location.href.includes("#") ) doSomething();` ? – Jeremy Thille Oct 22 '21 at 15:50 — Jeremy Thille, Oct 22 '21 at 15:50
@JeremyThille I would probably use location.hash – Chris Strickland Oct 22 '21 at 15:52 — Chris Strickland, Oct 22 '21 at 15:52

score 2 · Answer 1 · answered Oct 22 '21 at 15:53

2

var hash = window.location.hash;
if(hash){
// do something
}

answered Oct 22 '21 at 15:53

Ahmed Hany

952
6
12

Chris Strickland · Accepted Answer · 2021-10-22T16:10:21.570

2

You might be able to leverage the hashchange event to trigger the function, assuming you don't just want to keep polling the location to see if it changes.

DOCS: https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event

This code snippet will add the listener to the current page, then manipulate the hash and fire the function, displaying the new hash value. You could call any function here.

window.addEventListener('hashchange', function() {
    alert(location.hash);
});

window.location += "#test";

edited Oct 22 '21 at 16:10

answered Oct 22 '21 at 15:56

Chris Strickland

3,388
1
16
18

Thanks Chris. This is what I was looking for. Checking of hash on load still to be done for first time. But after that this is the thing I require. Thanks for your support. – Aniruddha Oct 22 '21 at 16:29
Glad it worked. If this solved your problem, please accept it as the answer. :) – Chris Strickland Oct 22 '21 at 17:06

score 0 · Answer 3 · answered Oct 22 '21 at 15:53

0

<script>
  if (window.location.href.includes('#')) {
    // run your code here
  }
</script>

answered Oct 22 '21 at 15:53

cs641311

178
8

Adhvaith Prasad · Answer 4 · 2021-10-22T16:01:08.770

use a location.hash function will solve your problem

var hash = window.location.hash.replace(/#/g, '');
if(hash){
// found a hash
console.log("heyy I found a hash")'
}
else{
// did not find a hash
console.log("Uh oh")
/*
  try using :
  window.location = window.location + '#' + "some random variable"
  to create a new URL and every time the page loads find the hash and 
  display the wanted data.
*/
}

PS: this only works if your URL is like example.com/#xyz then it will give you xyz as a console output. This may sound vague but if you do this you may get a Idea

How to invoke javascript function when # is present in URL

4 Answers4