| Lesson 12: Location Today we will be discussing Location, location, location (no, you didn't stumble into a small business seminar by accident http://www.webwizardsways.com:somePort/mySub/index.html?some=query#anchor) [Note- ignore the port if not familiar with it!!!] The location object allows you to access the various portions of the window/document's url and to make changes to their properties. For instance, to change the page currently displayed, you simply set the location property of the window object (which is a reference to the location object itself) to the new url! Together with methods allowing reloading and the entire replacement of an item in the history, you can completely manipulate the browser's location on the page, in your site, or on the web. Location Object - window.location the currently dispalyed document's url, stored in the location property of the window object http://www.webwizardsways.com:somePort/mySub/index.html?some=query#anchor A) Properties: 1) location.hash = the anchor portion of a url including the hash mark (#) and all that follows it #anchor 2) location.host = the hostname and port of the url www.webwizardsways.com:somePort 3) location.hostname = the hostname of the url www.webwizardsways.com 4) location.href = the complete url http://www.webwizardsways.com:somePort/mySub/index.html?some=query#anchor) [Note- This is the second location in Location, location, location. The location.href is normally the same as the document.location, however, in the case of a server redirect, the location.href will continue to be the originally requested url while the document.location becomes the , important to remember when combining JS and CGI] 5) location.pathname = the path of the url mySub/index.html 6) location.protocol = the protocol of the url including the trailing colon http: 7) location.search = the query string of the url including the question mark (?) up to the hash mark (#) ?some=query B) Methods 1) location.reload() just as it says, reloads the current url [Note- some platforms support location.reload(true) to bypass caching, but I'm not sure if WebTv does] 2) location.replace(new_url) similar to changing the value of the location object itself, replace will load the new_url as a replacement for the current document, however it will replace the current document's url in the history array of the window as well instead of adding a new value to the array, meaning if you use replace and then press back you don't go to the original page but rather to the previous page in the history array [Note- this is excellent for use in frames where you don't want the user to have to press the back button repeatedly, use replace to load new urls rather than loading them explicitly] Document Location- document.location the currently displayed document's url, normally the same as the location.href, however in the case of server redirects, document.location shows the url of the actual page, while location.href continues to show the url of the originally requested page. [Note- use document.URL instead to avoid confusion when referring to the actual document is important] Sample Demonstrate document.replace(url); Use this normal load button to go to a new url, and once there you can press your back button to return to this page: Use this replace button to "replace" this page with a new one. However, this means when you press your back button on the next page, you will not return here, but will instead go to the page you visited before you came here:
|