The Browser Object Model

location

Probably one of the most useful of the Browser Object Commands is window.location. This particular object provides the same functionality as window.document.url and more. As well as being able to access the current page URL and to change it to redirect to a different page, the location objject also provides access to all the different parts of the URL via properties attached to the object. This makes retrieving the part of the current address that you need or setting just the part of the new address that is different much easier.

To begin with we have window.location.href which is the exact equivalent of window.document.url (location by itself will also return the href value). We can replace the optional window reference on the front with top, self, parent, opener or any specific frame, tab, or window name to target that particular frame, tab or window (although you can only actually retrieve a value in that field if the content is from the same domain).

We can determine whether the current page is on a secure server or not by testing either location.protocol which will contain http:// or https:// or by testing location.port which will contain 80 or 443.

The location.host field contains the domain name and port number while location.hostname allows us to access the domain name without any of the rest of the address information.

Three more properties provide access to the remaining sections of the URL location.path gives access to the path and filename of the current page within the domain. We can easily obtain the path and filename separately simply by splitting this on the last slash. location.search returns the querystring from the URL . Using this is a better alternative to splitting the location.href on the question mark since this also makes sure that and anchor reference on the end of the URL is also excluded. That anchor reference if there is on can be retrieved from location.hash.

As well as retrieving information about the current page the location object can also be used to reload or replace the current page. Simply by setting a new value into the location object the page from the new address that it now specifies will be loaded into the browser in place of the current page. That will also update the window.history to add the new page to the history list. If we instead use the location.replace(url) method to pass a new URL into the location then instead of writing a new entry into history as it loads the page the prior page's entry will be overwritten instead. This is the only way that you can control what is in the history from your web page. The location.reload() method simply forces a reload of the current page.

The uses that this object has both in retrieving information about the current page and in allowing JavaScript to request for the browser to load a new page make this one of the most useful of the BOM commands.