Professional JavaScript for Web Developers: JavaScript in the Browser, Pt. 2 | 4

Professional JavaScript for Web Developers: JavaScript in the Browser, Pt. 2

The location object

One of the most useful objects in the BOM is location, which is a property of both window and document (this is where a lack of standards leads to some real confusion). The location object represents the URL loaded in a window and, as an added bonus, it also parses the URL into various segments:

  • hash - If the URL contains a pound sign (#), this returns the content after it (for example, http://www.somewhere.com/index#section1 has a hash equal to ¡"#section1").
  • host -The name of the server (for example, www.wrox.com)
  • hostname - Most often equal to host, this sometimes eliminates the www. from the front.
  • href - The full URL of the currently loaded page
  • pathname - Everything after the host in the URL. For example, the pathname for http://www.somewhere.com/pictures/index.htm is "/pictures/index.htm".
  • port - The port of the request if specified in the URL. By default, most URLs don't include the port as part of the URL so this property is typically blank. If a URL is used such as http://www.somewhere.com:8080/index.htm, the port is equal to 8080.
  • protocol - The protocol used in the URL. This is everything before the two forward slashes (//) in the URL. For example, the protocol for http://www.wrox.com is http: and the protocol for ftp://www.wrox.com is ftp:.
  • search - Otherwise known as the query string, this is everything after a question mark (?) in a URL performing a GET request. For example, the search for http://www.somewhere.com/search.htm?term=javascript is ?term=javascript.

The location.href property is used most often to either get or set the URL of the window (in this regard, it is similar to document.URL). You can navigate to a new page just by changing its value:

When navigating this way, the new location is added to the history stack after the previous page, meaning that the Back button goes to the page that made this call.

The method assign() accomplishes the same thing:

Either way is fine, but most developers use location.href because it more accurately represents the intent of the code.

If you don’t want the page containing the script to be accessible in the browser history, you can use the replace() method. This method does the same thing as assign(), but it takes the extra step of removing the page containing the script from history, making it inaccessible using the browser Back and Forward buttons. Try it for yourself:

    <html>
         <head>
              <title>You won’t be able to get back here</title>
         </head>
         <body>
              <p>Enjoy this page for a second, because you won’t be coming back here.</p>
              <script type=”text/javascript”>
                   setTimeout(function () {
                       location.replace(“http://www.wrox.com/”);
                   }, 1000);
              </script>
         </body>
    </html>

Load this page in your browser, wait for it to navigate to the new page, and then try hitting the Back button.

The location object also has a method called reload() that reloads the current page. The two modes for reload() reload from the browser cache or reload from the server. Which of these two modes is used depends on the value of one argument: false to load from cache; true to load from the server (if the argument is omitted, it is considered false).

The location object also has a method called reload() that reloads the current page. The two modes for reload() reload from the browser cache or reload from the server. Which of these two modes is used depends on the value of one argument: false to load from cache; true to load from the server (if the argument is omitted, it is considered false).

So, to reload from the server, you use this code:

To reload from the cache, you can use either of these lines:

Any code located after a reload() call may or may not be executed, depending on factors such as network latency and system resources. For this reason, it is best to have reload() as the last line of code.

The final method of the location object is toString(), which simply returns the value of location.href. Therefore, the following two lines of code are equal:

Any code located after a reload() call may or may not be executed, depending on factors such as network latency and system resources. For this reason, it is best to have reload() as the last line of code.

Throughout this section, the location object has been used in the examples. Remember, the location object is a property of both window and document, so window.location and document.location are equal to each other and can be used interchangeably.

The navigator object

The navigator object is one of the earliest implemented BOM objects, introduced in Netscape Navigator 2.0 and Internet Explorer 3.0. It contains a significant amount of information about the Web browser. It is also a property of the window object, and as such, can be referenced either as window.navigator or just navigator.

Although Microsoft originally objected to the term navigator as being specific to Netscape's browser, the navigator object has become a sort of de facto standard for providing information about a Web browser. (Microsoft does have its own object called clientInformation in addition to the navigator object, but both provide the exact same data.)

Once again, the lack of standards rears its ugly head with the navigator object because each browser decides what properties and methods to support. The following table lists the most popular properties and methods and also which of the four most popular browsers — Internet Explorer, Mozilla, Opera, and Safari — support them.

The navigator object is extremely helpful in determining what browser is being used to view a page. A quick search of the Internet reveals any number of methodologies for browser detection, all of which make extensive use of navigator. Browser and operating-system detection using the navigator object is discussed in greater detail in Chapter 9.

 

Created: March 27, 2003
Revised: June 27, 2005

URL: http://webreference.com/programming/prof_java2/1