Geek Answers Handbook

Executing custom JavaScript on specific pages of a site from a single file

Uploading my js file to all pages. Some functions are designed to work only on certain pages, for example, on the home page http://site.com . Can javascript read the url of the called page to determine if this is the main page?

+7
source share
7 answers

You can use the window.location object to get location properties. Some notable features:

  • window.location.href - returns the entire URL of the current page
  • window.location.hostname - returns only the host name (domain name, including any subdomains)
    • example: www.google.com
  • window.location.pathname - returns only the path (the part following the host name / domain, but not including the query string (the part of the URL starting with "?") or the hash (the part of the URL that starts with a "# "))
    • example: /subdir/subpage.html

Although all this works well, I would recommend (as others have said) that it would be better to do this on the server side. A server can usually do such things better than a client.

In addition, if you have all the JS code in one central file, you can add something like this directly to the page (on the server) to trigger an event for this page only, which can be more reliable than the location of the JS sniff:

 <script type="text/javascript"> // jQuery example $(document).ready(function () { // Run function that is specific for this page MyNamespace.initHome(); }); </script>
+9
source

Put a unique id attribute in the <body> element for each page and use this to determine what your JS should do. This is what I do with my only mini file, which (as soon as it combines many smaller JS files) looks basically like this:

 jQuery(function($){ if (!$('body#home').length) return; //... code specific to the home page }); jQuery(function($){ if (!$('body#contact').length) return; //... code specific to the contact page }); // etc. for each page

But you can just as easily write a more efficient single file, like:

 jQuery(function($){ if ($('body#home').length){ //... code specific to the home page } if ($('body#contact').length){ //... code specific to the contact page } });
+5
source

I think it would be better to understand this on the server side and call the right functions / load the right scripts depending on the page. The server side usually knows best what the current page is.

+2
source

You can read the URL as ClosureCowboy said , but in that form back. Usually, if you know that you do not need a JavaScript file, you do not include it in the page.

+2
source

Save all your JS code in one file, let it load on every page (cached anyway), but here's the catch:

ONLY call the functions you need from the page they need

Trying to put the “which page I find” logic in the JS file just seems to be reversed.

+2
source

Here is a small piece of code that I used to set a unique cookie for each page. It should work just fine to get exactly what you want. You can run it using the switch to create different actions for different pages, or simply use the simple if statement to run code only on the home page.

 var sPath = window.location.pathname; var sPage = sPath.substring(sPath.lastIndexOf('/') + 1); console.log(sPath);

I added console.log so you can see that it calls the page in the Firebug Console. Change it to a warning if you want it to pop up.

+1
source

Your JavaScript can get the current URL using window.location .

 alert(window.location);
0
source

More articles:


All Articles