Executing custom JavaScript on specific pages of the site from a single file
my js file loads on all pages. Some functions are meant to run only on certain pages like the homepage only http://site.com. Can javascript read the url of t开发者_如何学Che page it's being called from to determine if it's the homepage?
You can use the window.location object to get properties about the location. Some notable properties are:
window.location.href- returns the entire URL of the current page- example: http://www.google.com/subdir/subpage.html
window.location.hostname- returns just the hostname (the domain name, including any subdomains)- example: www.google.com
window.location.pathname- returns just the path (the part following the hostname/domain, but not including the query string (part of the URL that begins with a "?") or the hash (part of the URL that begins with a "#"))- example: /subdir/subpage.html
Although all this works well, I would recommend (like others have mentioned) that it would be better to do this server-side. The server can usually do stuff like this better than the client.
Additionally, if you have all your JS code in a single central file, you could add something like this directly to the page (on the server) to trigger an event for just that page, which may be more reliable than JS location sniffing:
<script type="text/javascript">
// jQuery example
$(document).ready(function () {
// Run function that is specific for this page
MyNamespace.initHome();
});
</script>
Put a unique id attribute on the <body> element for each page, and use that to determine what your JS should do. This is what I do with my single minified file, which (once it concatenates many smaller JS files) looks basically like:
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 as:
jQuery(function($){
if ($('body#home').length){
//... code specific to the home page
}
if ($('body#contact').length){
//... code specific to the contact page
}
});
I think it might be a better idea to figure this out on the server side and call the correct functions/load the correct scripts depending on the page. The server side usually knows better what the current page is for anyways.
You could read the URL as ClosureCowboy said, but that's kind of backwards. Usually, if you know you don't need a JavaScript file, you don't include it on the page.
Keep all of your JS code in a single file, let it load on every page (cached anyways) but here's the catch:
ONLY call the functions you need from the page that needs them
Trying to put "what page am I on" logic in the JS file just seems backwards.
Here is a little piece of code that I have used to set a unique cookie for each page. It should work just fine to get exactly what you want. You can run it through a switch to produce different actions for different pages, or just use a 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 the console.log so that you can see what it calls the page in the Firebug Console. Change it to alert if you would rather it pop up.
Your JavaScript can get the current URL using window.location.
alert(window.location);
加载中,请稍侯......
精彩评论