JavaScript function if url has hash tag and user has just navigated forward or back with browser?

Question

The following will fire an alert when the page is refreshed if the hash tag ends in twoB:

if (window.location.href.match(/\#twoB/))
{
   alert('twoB');
}

The issue is that if you've clicked on a few hash tags and then click back in your browser, although the URL includes the hash the alert doesn't fire. How can I make the code fires (ideally only) after a user has gone back or forward with their browser.

I'm using jQuery for this project so i would like a jQuery solution in an ideal world if the syntax is easier.

Is their no native way to do this? Seems a shame to use a library for one feature if it can be done without. Thanks — Evanss
– Evanss, Commented Mar 21, 2012 at 9:38
@jdn See developer.mozilla.org/en/DOM/Manipulating_the_browser_history — Phrogz
– Phrogz, Commented Mar 21, 2012 at 12:35
Ive answered my question using something sort of similar. #tag links are already added to the browser history, so the issue was firing something when their clicked, there isnt a need to modify the browser history. Ive solved it with onpopstate which listens for when the history changes, such as when you click a #tag. Thanks — Evanss
– Evanss, Commented Mar 21, 2012 at 12:46
Not sure if ive used the correct terminology, by #tag links I mean link fragments eg <a href-"#frag">Link to content on this page</a> — Evanss
– Evanss, Commented Mar 21, 2012 at 12:49

Domenic · Accepted Answer · 2012-03-21 16:10:25Z

3

$(window).on("hashchange", function () {
    console.log("hash is now " + window.location.hash);
});

Note that on was added in jQuery 1.7; if you're using an older version, then do $(window).bind instead.

edited Mar 21, 2012 at 16:10

answered Mar 20, 2012 at 17:50

Domenic

113k42 gold badges227 silver badges275 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Evanss Over a year ago

Just noticed it also breaks any JavaScript below it. Is there a syntax error? Ive only added your code exactly how it is, do I need to define "hashchange" or something? Thanks

Domenic Over a year ago

Hmm, no, it should work... I'm assuming you have jQuery as the $ global?

Evanss Over a year ago

Here is my solution. It works as far as ive tested but does depend on onpopstate and would be pretty annoying for users without it. smartpeopletalkfast.co.uk/1

Evanss Over a year ago

Here is my probably wrong implementation of your code. Ive also tried putting in the jquery function before the gmap3 function, but still doesnt work for me. Thanks smartpeopletalkfast.co.uk/2

roto Over a year ago

Try $(window).bind instead of $(window).on. It could be a JQuery version issue as .on was added in version 1.7.

|

Evanss · Accepted Answer · 2012-03-21 12:21:22Z

0

Initially I solved this quite an ugly way of using setInterval to repeatedly check the URL. HTML5s onpopstate runs when the page is first loaded and then every forward and back navigation aswell.

window.onpopstate = function(){ 
  if (window.location.href.match(/\#twoB/))
  {
     alert('twoB');
  }
}

answered Mar 21, 2012 at 12:21

Evanss

22.5k101 gold badges327 silver badges563 bronze badges

Comments

Jamie R Rytlewski · Accepted Answer · 2012-03-21 12:30:08Z

0

Why don't you use location.hash instead of href.match? The location.hash should be faster as you are only getting the hash and you don't have to do a match?

answered Mar 21, 2012 at 12:30

Jamie R Rytlewski

1,22711 silver badges23 bronze badges

1 Comment

Evanss Over a year ago

Does this solve my problem or just improve performance? Thanks for the tip either way.

Collectives™ on Stack Overflow

JavaScript function if url has hash tag and user has just navigated forward or back with browser?

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related