How to Find a Location with JavaScript - dummies

By John Paul Mueller

Knowing your location is an important part of working with JavaScript applications in a browser environment. The location object makes it possible to determine the current location that the user is viewing. In fact, you can take the location information apart so that you can work with just the part you need.

Running this example from your web server is really helpful because otherwise you won’t see the full list of elements. The output from these examples also uses a somewhat contrived URL of http://localhost/GetLocation.html?Make a Query. The query portion isn’t actually functioning, but it does provide additional output.

How to determine the current location in JavaScript

The location object provides access to a number of properties that let you interact with or dissect the complete URL. The href property displays the entire URL. Properties such as search and port provide access to URL components. Notice that the Port field is blank because the server is using the default port of 80. If you were using a special port, you’d see it listed in the Port field.


The location properties always provide the escaped version of the URL. To see the human-readable version, you must use the unescape() function. The first line in the output shows the result of using the unescape() function on the href property. Meanwhile, the last line shows the escaped version of the search property.

How to change the location in JavaScript

Navigating to a new page is an important part of browser-based application design. Of course, you can always add links to an application and let the user make any location changes. However, there are times when you want to programmatically change location. The following functions show how to use the three methods the location object provides for changing location.

function AssignURL()
  location.assign("GetLocation.html?Make a Query");
function ReplaceURL()
  location.replace("GetLocation.html?Make a Query");
function ReloadURL()

The assign() method assigns a new URL to the current page. What you see is the page provided as input to the method.

The replace() method seemingly performs the same task as the assign() method. However, there’s a subtle, but important, difference between the two methods. When a browser replaces the current page, rather than assigning it, the back button is no longer functional on most browsers. The new page actually does replace the current page.

This is an important difference because shopping cart applications often require that the user not click the back button. Designers make the mistake of assigning the page, rather than replacing it. When you create an application where the back button should be disabled, make sure you use the replace() method.

The reload() method performs the same task as the reload button on the browser. However, there’s an important difference in this case. If you call reload(true), the page doesn’t load from the local cache. Instead, the page is loaded from the server. You can use this behavior to fix problems with an application when a network error has caused a fault in the page.

Reloading from the server (something the user can’t do easily) restores the content to the form that you originally intended.