var whereWeAt = window.location.href;
For example, if the browser is currently at
http://www.mybeautifulsite.com/products/page33.html#humidifier, the statement above will assign the string "http://www.mybeautifulsite.com/products/page33.html#humidifier" to the variable whereWeAt.
You can also get pieces of this. This statement gets just the domain name.
var theDomain = window.location.hostname;
In the example, the string "www.mybeautifulwebsite.com" is assigned to the variable theDomain. "http://", the path, and the anchor are omitted.
Here's how you get the path.
var thePath = window.location.pathname;
In the example, the string "/products/page33.html" is assigned to the variable thePath. If the browser were on the home page and the URL were simply http://www.mybeautifulsite.com, the string "/" would be assigned to the variable.
In the example, the browser has been pointed to a section of the page marked by the anchor #humidifier. This statement identifies the anchor.
var theAnchor = window.location.hash;
The string "#humidifier" is assigned to the variable theAnchor. If there is no anchor in the URL, the variable is assigned an empty string, "". As usual, you can reverse the order of things, telling the browser where to go instead of asking where it is.
window.location.href = "http://www.me.com/1.html";
The statement above tells the browser to navigate to the page named 1.html at the site
me.com.
If you wanted the browser to navigate to the site's home page, you'd write...
window.location.href = "http://www.me.com";
And if you wanted it to land on an anchor...
window.location.href = "http://www.me.com/1.html#section9";
It would be nice if you could use window.pathname = ... to move to a different page on the current site or window.hash = ... to move to an anchor on the current page, but you can't. What you can do, though, is query the browser for the domain name and combine that with the page where you want to go.
1 var currentSite = window.location.hostname;
2 var destination = "http://" + currentSite + "/wow.html";
3 window.location.href = destination;
Here's the line-by-line breakdown:
1. Gets the domain name and assigns it to the variable currentSite. Example: www.me.com
2. Concatenates the string "http://" with the domain name plus the destination page and assigns the combo to the variable destination
3. Directs the browser to the destination
This is how to direct the browser to an anchor on the current page.
1 var currentSite = window.location.hostname;
2 var currentPath = window.location.pathname;
3 var destination = "http://" + currentSite + currentPath + "#humidifier";
4 window.location.href = destination;
Here's the breakdown:
1. Gets the domain name and assigns it to the variable currentSite. Example: www.me.com
2. Gets the pathname and assigns it to the variable currentPath. Example: /1.html
3. Concatenates the string "http://" with the domain name, the destination page, and the desired anchor and assigns the combo to the variable destination
4. Directs the browser to the destination
The window.location object can be used to get the current page address (URL) and to redirect the browser to a new page.
The window.location object can be written without the window prefix.
Some examples:
- window.location.href returns the href (URL) of the current page
- window.location.hostname returns the domain name of the web host
- window.location.pathname returns the path and filename of the current page
- window.location.protocol returns the web protocol used (http: or https:)
- window.location.assign loads a new document
We can omit window. It's legal to use location.href, location.hostname, location.pathname, and location.hash. It's more common to include window. We can omit href when you're detecting the URL. It's legal to use window.location, or simply location. (See above.) Including href is preferred
for esoteric reasons. We can use document.URL as an alternative to window.location.href.
There are two more ways to direct the browser to a url, alternatives to window.location.href.
In the above we have learned to direct the browser to a new URL by assigning a string to window.location.href. Here's another way to do the same thing.
window.location.assign("http://www.me.com");
The statement directs the browser to the home page of me.com. As with the window.location.href statement, you can make the URL as detailed as you like.
window.location.assign("http://www.me.com/lojack.html#guarantee");
The statement directs the browser to the anchor #guarantee on the lojack.html page of the
site me.com. Here's another alternative that has a slightly different effect.
window.location.replace("http://www.me.com/lojack.html#guarantee");
Once again, the statement directs the browser to a new URL. But by using replace instead of assign, you interfere with the browser history. When you use assign, the history is intact. The statement takes the user away from the original page, to the new page. If, after arriving at the new page, she presses the Backspace key or clicks the browser's back button, she goes back to the original page that she just came from. But when you use replace, the original page doesn't make it into the history. If the user presses Backspace after being taken to the new page, she's taken to the page that displayed before the original page since the original page is no longer in the history. If there is no page before the original page, nothing happens when she presses Backspace.
To reload the current page code one of these statements:
window.location.reload(true);
window.location.reload(false);
window.location.reload();
All three statements reload the current page. If the argument is true (example 1 above), the statement forces the browser to load the page from the server. If the argument is false (example 2) or if there is no argument (example 3), the browser will load the page from the cache if the page has been cached. We can use window.location.href = window.location.href or any of the abbreviated alternatives to reload the current page. The reload is faster, but it doesn't allow you to specify whether the browser reloads from the server or the cache document.URL = document.URL doesn't work.
