window.onload to determine what code to run depending on page value

Question

I use the window.onload function throughout my website, via a single external .js file, and I usually check to see what page i'm on, so that certain statements will run, e.g:

window.onload = function() {
    var curPage = document.getElementById('page').value;
    if (curPage === "index.html") {
        // do something here
    }
    if (curPage === "about.html") {
        // do something else here
    }
}

with 'curPage' being a value from an input within each html document

<input id="page" type="hidden" value="my-page.html" />

I see people adding an id to the body element to achieve the same effect, like so:

<body id="pageisIndex">

However, I would like to know if there is an even better way to initialize/pull a variable within the HTML document without the use of an input or element id.

would something like ...

<script type="text/javascript">
var curPage === 'index.html';
</script>

... be alright/proper to use while also using an external .js file?

EDIT:

All of the answers provided are very good, I believe this is one of those times where it comes down to an individuals opinion; however, using location.pathname or document.URL are great methods that I will be testing out. Awesome!

EDIT 2:

I found something pretty cool I thought I would post here, the following gives us the last page within the path.

page = location.pathname.split('/').pop();
console.log(page);

You can use [`document.title`](https://developer.mozilla.org/en-US/docs/Web/API/document.title) providing that you set it appropriately in all html files. — PM 77-1, Jan 15 '15 at 04:43

score 1 · Answer 1 · answered Jan 15 '15 at 05:30

You could possibly try RegExp with given page name itself without any hidden field:

var url = window.location.pathname;
if(url.match('index.html')) {
    //to do
} else if(url.match('about.html')) {
    //to do
} else {
    //to do
}

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

You can use:

location.pathname

which returns everything in the url after the domain. For example, for this page it's: /questions/27956897/window-onload-to-determine-what-code-to-run-depending-on-page-value

It does not include the query string if present. If you want just what follows the last forward-slash, that's discussed in this post: Get value of a string after a slash in JavaScript, which will work if you don't care about the rest of the path but just want to extract the filename.

edited May 23 '17 at 11:58

Community

1
1

answered Jan 15 '15 at 05:20

Mic

3,810
1
13
16

This is great, because I may have pages with the same name within different directories, e.g.: /update/client.php and /view/client.php... I also wont need to add anything to the .html files. – Jan 15 '15 at 05:45

score 0 · Answer 3 · answered Jan 15 '15 at 05:21

I used the last option you have shown which seemed to be a good solution. Setting a variable at the beginning of a page and checking its value is easy. I think instead of giving the exact page name I would go for something which is meaningful like "intropage" or "sellingpage" which will be easier to decipher at a later time.

<script type="text/javascript">
var curPage = 'intropage';
</script>

Another approach that could be to used if you don't want to set id or variable is to check the location.pathname or location.href to get the current location and take necessary steps.

window.onload to determine what code to run depending on page value

3 Answers3