JavaScript Demo - URLing, URL-Related Properties and Methods

Return to the JavaScript Demos Page

window.location Properties

history Property

URL-Related document Properties

Details

window.location Properties:

• window.location is a short way to specify window.location.href, which holds the URL of the document that is currently being displayed* in the browser. You can load a different document in the browser by assigning an URL (as a string) to the property. The URL can be absolute or relative. Example:
     window.location = "http://johnmastell.info/index.html";
  This loads the home page of this web site in the browser.
  * Technically, window.location.href holds the URL used to request a document from a server. If the server uses URL redirection, the actual URL of the document can be different than the request URL. document.URL (see below) holds the actual URL.
• window.location.protocol holds the protocol portion of the URL, such as "http:" or "https:".
• window.location.host holds the hostname and port (if any) of the URL. For example, for the URL "http://www.example.com:80/somepage.html", the hostname and port are "www.example.com:80".
• window.location.hostname holds the hostname (if any) of the URL. For example, for the URL "http://www.example.com:80/somepage.html", the hostname is "www.example.com". Note that the file: protocol does not use a hostname, but the http: protocol does.
• window.location.port holds the port (if any) of the URL. For example, for the URL "http://www.example.com:80/somepage.html", the port is "80".
• window.location.pathname holds the path portion of the URL. For example, for the URL "http://www.example.com/games/pc/redfaction.html", the path is "/games/pc/redfaction.html".
• window.location.search holds the query portion (if any) of the URL. For example, for the URL "http://www.example.com/somepage.html?color=red&planet=mars", the query is "?color=red&planet=mars". Note that the leading question mark for the query string is included in the property. You can use JavaScript to parse the window.location.search string and perform tasks based on its contents, allowing you to use client-side JavaScript instead of server-side CGI.
• window.location.hash holds the anchor portion (if any) of the URL. (The anchor specifies which part of a document you jump to when it is loaded.) For example, for the URL "http://www.example.com/games/pc/redfaction.html#cheats", the anchor is "#cheats". Note that the leading "hash" mark for the anchor is part of the property.

Q: Why do you use "window.location" when just "location" will work?

A: It'll work in many contexts. However, it is possible that custom JavaScript code might contain a variable also called "location," and depending upon scope that variable could be used when you actually wanted to use window.location.

window.location and other window Methods:

While we're at it, window.location and window have some methods you can use:

• window.back() works like the browser's Back button.
• window.forward() works like the browser's Forward button.
• window.home() works like the browser's Home button.
• window.location.reload() reloads the current document in the browser. It checks the document's "If-Modified-Since" HTTP header on the server and loads the document from the server if the header indicates the contents of the document have changed. Otherwise, it reloads the document from the browser's cache. You can force a reload from the server by using window.location.reload(true).
• window.location.replace("url") loads the specified URL and causes the browser's history list to forget about the previously-loaded document. This can be useful when a site uses temporary pages (which users wouldn't want to go back to) or frames.
• window.stop() works just like the browser's Stop button.

history Property:

Note: The history object has several properties, but only one is generally available in an unsecure environment:

• history.length holds the number of URLs that are in the browser's history.

history Methods:

• history.back() works like the browser's Back button.
• history.forward() works like the browser's Forward button.
• history.go(#) causes the browser to go back or forward a number of URLs in its history. # must be an integer; enter a negative integer to go back and a positive integer to go forward. Examples: history.go(-2) causes the browser to go back two URLs (somewhat like pressing the Back button twice); history.go(2) causes the browser to go forward two URLs (somewhat like pressing the Forward button twice); history.go(0) causes the browser to reload the current URL. Note: In some older versions of Internet Explorer, history.go(#) can be called only with -1, 0, or 1.

URL-Related document Properties:

• document.URL holds the actual URL of the document being displayed in the browser. This can be the same URL as held by window.location.href, but it can be different: window.location.href holds the URL used to request a document from a server. If the server uses URL redirection, the actual URL of the document can be different than the request URL, and document.URL holds the actual URL. Unlike window.location.href, you cannot assign a value to document.URL.
• document.title holds the title of the document (which it gets from the <title> tag in the HTML header of the document. OK, this isn't URL-related, but it still can be useful.
• document.referrer holds the URL of the document (if any) from which the current document was reached. You can use this value to see where the user came from. You cannot change the value of document.referrer.
• document.domain holds the domain of the document. Initially, it holds the hostname of the server from which the current document it loaded. By default, for security purposes, an unsigned JavaScript script can only read the properties of windows that come from the same server. document.domain can be changed to allow a script to read properties of windows from other servers in the same domain. (This is extremely useful if you use multiple servers to handle a large site). For example, for the URL "http://www.example.com/games/pc/redfaction.html", document.domain initially is set to "www.example.com". You can change it to "example.com" to let scripts work with all servers at example.com. You cannot set it to any other domain (such as "spamme.com").
• document.lastModified holds the date and time the document was last modified. Warning: This is not guaranteed to be reliable. When using http, lastModified is derived from the HTTP header sent by the server for the document. If the server does not send a last-modified value, lastModified is set to 0, which JavaScript interprets as midnight GMT January 1, 1970!
• document.readyState indicates the loading status of the document. It can have these standard values:
  loading: The document is loading.
  interactive: The document is still loading, but enough has loaded to allow the user to interact with it (specifically, the document has been parsed but sub-resources are still loading).
  complete: The document is completely loaded and completely initialized.
  Also, 3Schools' reference states that there is an unintialized value and indicates that all modern, common browsers support it, but the HTML documentation for the WHATWG Community doesn't list this value, although according to the browser documentation, some versions of some browsers (e.g., Internet Explorer) support this value while others (i.e., Firefox) do not.
  Some versions of Internet Explorer also have a loaded value that occurs when the document's data is loaded but the user cannot interact with the document yet (as constrasted to interactive above), but this is not a web-standard and at least some other browsers do not support this value.
• document.location has been deprecated (in favor of document.URL) since JavaScript 1.1. Do not use it, just in case some future JavaScript version ceases to support it!

If you look at the document.readyState value shown above, it should be shown as "loading" even though by now the document should be completely loaded. This is because the script that reads the value is inlined with the HTML markup and is executed when the markup is processed. For comparison, click the link to run another script that will read the value right now display it below:

Return to the JavaScript Demos Page