detection change of location.hash

[User]

Hi,
A page I have shows a different background colour depending on the
hash portion of the url as it is first loaded. For example a link to
mysite/mypage#0000FF would result in a page with a blue background. But
another link, this one to mysite/mypage#FF0000, would not give me a red
background if directed to the window where mypage#0000FF was loaded
just one moment ago. This is normally to be expected, because the browser
thinks same page, no load event, basta.
If I use the search portion, for obvious reasons, that is treated a new page
load, even when it is from the cache, but I need the hash here. So how do I
detect in mypage the moment when the hash string is changed by a user click
event on another page in another window, perhaps even from another domain?

Hope this is clear, thanks for any ideas,
Thomas

 

[Lee]

User said:

Hi,
A page I have shows a different background colour depending on the
hash portion of the url as it is first loaded. For example a link to
mysite/mypage#0000FF would result in a page with a blue background. But
another link, this one to mysite/mypage#FF0000, would not give me a red
background if directed to the window where mypage#0000FF was loaded
just one moment ago. This is normally to be expected, because the browser
thinks same page, no load event, basta.
If I use the search portion, for obvious reasons, that is treated a new page
load, even when it is from the cache, but I need the hash here. So how do I
detect in mypage the moment when the hash string is changed by a user click
event on another page in another window, perhaps even from another domain?

Hope this is clear, thanks for any ideas,

So, if I understand correctly, you'd like a small pet that sits in
a cage and sings, but it has to be a horse. Is that about right?

 

[User]

User said:

So, if I understand correctly, you'd like a small pet that sits in
a cage and sings, but it has to be a horse. Is that about right?

Close, but not quite. Rather a little mouse like Jerry that runs around the
room endlessly checking the plinth for any holes where it can hide for Tom's
teeth that may suddenly out of the naked blue come hunting him. But I don't
want to use a setTimeout or interval to continuously monitor the addressbar
when not absolutely necessary.
Take for example the case of a person reading this post in whatever program
he uses to read newsgroups, and clicking this link to
http://www.jibbering.com/faq/#FAQ4_40. Once there, he can click on to
#FAQ4_41 or other in-page targets, moves that affect the window history but
not any clear Javascript event. You can set up event listeners around every
link on the page to catch the event of such in-page moves, but now suppose
our user blurs the browser window, returns to this posting and clicks on
this link http://www.jibbering.com/faq/#FAQ4_41 instead. The browser pops
back up, he ends up at the same spot, but the event has not been captured
because it occured in his newsreader client where he follows the newsgroup!
And I don't see how Javascript can ever know about it other than by
constantly checking the location.hash property, wasting enormous amounts of
CPU cycles.

I find that very strange. There must be a way. I don't see how security
would be compromized by this piece of knowledge, it is a bit of information
about the page as obvious and as basic as the window size. There is a
onresize event, why not a onhashchange event?

Thanks again,
Thom

 

[web.dev]

Hi User,

User wrote:
[snip]

You can set up event listeners around every
link on the page to catch the event of such in-page moves, but now suppose
our user blurs the browser window, returns to this posting and clicks on
this link http://www.jibbering.com/faq/#FAQ4_41 instead. The browser pops
back up, he ends up at the same spot, but the event has not been captured
because it occured in his newsreader client where he follows the newsgroup! [snip]

Thanks again,
Thom

One solution that I'm thinking of off the top of my head is what you
already described.

1. Set up event listeners in the page for which the background color
will change. (No need to set up listeners on other pages, because once
they open up this page, the window.location.hash will kick in)
2. Try something like below for the blurring and focusing of the
window.

<script type = "text/javascript">
function bgChange()
{
document.bgColor = window.location.hash;
}

window.onload = bgChange;
window.onfocus = bgChange;
</script>

Hope this helps.

 

[Kevin Newman]

Hi,
A page I have shows a different background colour depending on the
hash portion of the url as it is first loaded. For example a link to
mysite/mypage#0000FF would result in a page with a blue background. But
another link, this one to mysite/mypage#FF0000, would not give me a red
background if directed to the window where mypage#0000FF was loaded
just one moment ago. This is normally to be expected, because the browser
thinks same page, no load event, basta.
If I use the search portion, for obvious reasons, that is treated a new page
load, even when it is from the cache, but I need the hash here. So how do I
detect in mypage the moment when the hash string is changed by a user click
event on another page in another window, perhaps even from another domain?

The only way I've found is to use setInterval with a function that
checks it current status. I'd love to find a way to do this in a more
event driven way though, so if you find something please share

http://www.unfocus.com/Projects/HistoryKeeper/

BTW, just to point out a browser bug that you might run into - if the
user manually updates the hash in IE or Mozilla, scripts will no longer
be able to update that portion of the url.

Kevin N.

 

[Kevin Newman]

Take for example the case of a person reading this post in whatever program
he uses to read newsgroups, and clicking this link to
http://www.jibbering.com/faq/#FAQ4_40. Once there, he can click on to
#FAQ4_41 or other in-page targets, moves that affect the window history but
not any clear Javascript event. You can set up event listeners around every
link on the page to catch the event of such in-page moves, but now suppose
our user blurs the browser window, returns to this posting and clicks on
this link http://www.jibbering.com/faq/#FAQ4_41 instead. The browser pops
back up, he ends up at the same spot, but the event has not been captured
because it occured in his newsreader client where he follows the newsgroup!
And I don't see how Javascript can ever know about it other than by
constantly checking the location.hash property, wasting enormous amounts of
CPU cycles.

I've tried to use location.watch('hash',...) on Mozilla (and Netscape
4.x, which if I remember correctly actually works), but it doesn't
trigger when the hash changes, until it is accessed - probably because
location.hash is a property with a getter and setter in Mozilla - which
I even tried to redefine. (Is it possible to monitor whether a specific
method is called? Probably not I'd bet.)

I've never found a way to get it working in any other browsers except to
constantly monitor it (which doesn't even always work - like in Safari).

Sorry for double posting...

Kevin N.

 

[Kevin Newman]

One solution that I'm thinking of off the top of my head is what you
already described.

1. Set up event listeners in the page for which the background color
will change. (No need to set up listeners on other pages, because once
they open up this page, the window.location.hash will kick in)
2. Try something like below for the blurring and focusing of the
window.

<script type = "text/javascript">
function bgChange()
{
document.bgColor = window.location.hash;
}

window.onload = bgChange;
window.onfocus = bgChange;
</script>

Hope this helps.

This is an interesting idea - are there events fired when the user
presses the forward and back buttons?

Kevin N.

 

[Kevin Newman]

Hi,
A page I have shows a different background colour depending on the
hash portion of the url as it is first loaded. For example a link to
mysite/mypage#0000FF would result in a page with a blue background. But
another link, this one to mysite/mypage#FF0000, would not give me a red
background if directed to the window where mypage#0000FF was loaded
just one moment ago. This is normally to be expected, because the browser
thinks same page, no load event, basta.
If I use the search portion, for obvious reasons, that is treated a new page
load, even when it is from the cache, but I need the hash here. So how do I
detect in mypage the moment when the hash string is changed by a user click
event on another page in another window, perhaps even from another domain?

Hope this is clear, thanks for any ideas,
Thomas

In css there is a :target pseudo element that can be used to cause the
style of the anchor that is targeted by the hash to change when that
hash is active.

So I guess the question is, is there a way to detect when the target
changes?

Or is it possible to detect when the style of the anchor element(s)
changes (or when the applied pseudo element changes)?

This would only work in Mozilla and other browsers that support the
:target pseudo element, but it's a start.

Kevin N.

http://www.unfocus.com/Projects/IE7/compatibility/target.html#oranges

Note: IE7 seems to just trap mouseup events on everything, so this would
not work for your (or my) purposes (pressing the back button does not
update the target in IE with Dean's IE7).