CodingBison

An important property of the global window object is the location object -- this property stores the current URL of the page loaded on the browser. This property also allows us to redirect the page to a new location when we change the URL of the location object.

Since window.location itself is an object, let us first explore some of its properties. We provide below an example that iterates through properties of window.location object using a for/in loop.

 <!doctype html>
 <html>
 <div id="div_id"> </div>
 <script type="text/javascript">

 var elem = document.getElementById('div_id');

 // First, print properties of the window.location object.
 for (item in window.location) {
     elem.innerHTML += item + ",";
     elem.innerHTML += window.location[item] + "<br>";
 }

 </script>
 </html>

When we load this file (let us call it "http://localhost:8080/location.html?check") on a browser, then the output shows various properties of the window.location object.

 pathname: /location.html
 assign: function () { [native code] }
 hash: 
 port: 8080
 reload: function () { [native code] }
 hostname: localhost
 replace: function () { [native code] }
 href: http://localhost:8080/location.html?check
 origin: http://localhost:8080
 host: localhost:8080
 protocol: http:
 search: ?check
 getParameter: function getParameter() { [native code] }

In the above output, the pathname refer to the path of the file with respect to the default webserver location (/var/www/html in this case) and href reflects the complete URL of the page. Also, the "search" property evaluates to "?check" which is the search string passed to the URL. The hash returns the anchor portion of the URL. For example, if the URL is http://localhost:8080/location.html#wizard, then the hash output would be "#wizard"; the hash includes the "#" as well. The hostname returns the name of the host on which the web-server is running (in this case localhost). The port number returns the port number on which a server is running; in this case, the webserver is listening on port 8080 and so the port output is 8080.

Note that, by default, the web-server listens on port 80 and the default value is typically not displayed. One can always modify the port on which the webserver listens. For example, in Fedora Linux, we can modify the httpd configuration file (found here: /etc/httpd/conf/httpd.conf) and change this line "Listen 80" to "Listen 8080". If we restart the web-server after this change, then we would be able to specify port 8080 and see the above output.

Next, we provide a simple example that allows us to manipulate this object to redirect the user to a new page.

Next, let us use a small example to show the replace() method of the window.location. With this method, we can simply redirect the current page to a new page -- in this example, we redirect the current page to "http://www.google.com".

 <!doctype html>
 <html>
 <div id="div_id"> </div>
 <script type="text/javascript">

 var elem = document.getElementById('div_id');

 // Pass a new URL to the location field 
 function goToANewPage() {
     window.location.replace("http://www.google.com");
 }

 // Print the value of window.location 
 elem.innerHTML = window.location;

 // Set timeout to go to a new URL after 1 second
 window.setTimeout(goToANewPage, 1000);

 </script>
 </html>

The above code would first print the current location of the script. Next, after 1000 milli-seconds (1 second), it would automatically redirect to the new location: "http://www.google.com". Instead of using the replace() method, we can also directly set the value of location to the new URL as follows: window.location = "http://www.google.com";

Note that we need to specify "http://" in the replace() method, else, JavaScript would look for "www.google.com" in the current folder and assuming that you do not have a file named "www.google.com" in your current directory (which is rather likely), JavaScript would complain about it. This behavior when we do not specify "http://" is useful for those cases, where we need to redirect the current page to another HTML file (let us say "location_example.html") that is also kept in the same directory (or kept in the same file system); for such cases, we can simply say: window.location = "location_example.html".





comments powered by Disqus