A Bit About Website Navigation in JavaScript

I had the idea that I wanted to suppress the introductory animation on my site’s main page when navigating back to it from other pages within the site (i.e., if coming from another page in the rpchurchill.com domain). This is on the not-always-applicable theory that many surfers will arrive at the main page first and navigate from there. Seeing the animation in that context would be OK but seeing it every time they went back would get old pretty quickly. Rather than inflicting cookies on people I looked to see if there was a way in JavaScript to find out what site the user came from.

It turns out that the document object in the browser includes a value called referrer that provides the desired information under some circumstances. Click on the link below to see the excitement. Be sure to click through to the following link and go back a forth a few times. When the excitement wears off come back here.

Click here.

You may have noticed that the location of the page the user arrived from includes different information. In one case it includes the “index.html” text at the end of the source link and in the other case it does not. That’s because it reports the information provided by the link in the source page.

In both cases the reported text included the fully qualified path starting with https://rpchurchill.com/demo/... even though the href="" value only included the relative directory information, as shown in the listings for the two sample pages below.

The first file is found at https://www.rpchurchill.com/demo/random_page/index.html.

The second file is found at https://www.rpchurchill.com/demo/random_page/page_01/index.html. It’s exactly the same except for a couple of lines in the middle.

Interestingly, if the url is typed directly into the address bar the value returns an empty string. This is true if even part of the url is typed in. For example, if you go to the link above and then add /page_01 by hand the source page will be reported as an empty string.

I do a bit of testing on the return value to make sure it’s defined and whether or not it’s blank so the code knows what’s going on.

Last but not least, if you want to try this from an external website go here. The source there is reported as an empty string, which is confusing. This behavior seems consistent(ly inconsistent) across several browsers.

References here, here, and here.

This entry was posted in Software and tagged , , . Bookmark the permalink.

Leave a Reply