Deciding on a Page Address with Window.location

Javascript is well-known for its ability to modify content on a web page. Less well-known is its ability to move between web pages programmatically so users don’t have to manipulate the browser manually by clicking on links or browser control buttons.

The Javascript standard provides an object called Window.location to handle changing a web page’s address and many other actions. These actions do not directly affect the Document Object Model (DOM) of a particular web page, and may load a new document.

The “location” part of Window.location is its own object type. The Location object is not unique to the Window object that controls the web browser. A single web page can support multiple Location objects.

Window.location is unique because it doesn’t require knowledge of anything on a web page to work. Location objects contain over a dozen properties and methods, and all of these are available to the unique Window.location object.

This article will cover the most commonly used properties and methods of Window.location.

Window.location.href

The window.location.href property returns the URL (Universal Resource Locator) of the current page. Developers can change this property by assigning a new value to it, and the browser will navigate to that new address when the assignment happens.

This example prints out the initial page address, http://example.com, then navigates to the Udacity home page using window.location.href.

console.log(window.location.href);
window.location.href = "https://www.udacity.com/";

Window.location.hostname

The window.location.hostname property returns the domain of a URL. Do not attempt to change this property in code; it will not redirect a web page to another location.

// http://example.com
console.log(window.location.hostname);  // example.com

Window.location.pathname

The window.location.pathname property returns the path to the given web page on its server. For a URL that contains a domain but no additional server path, like https://example.com, the property would return an empty string.

The following example returns the path to my author page on the Udacity blog.

// URL: https://www.udacity.com/blog/author/jessica-castrogiovanni
console.log(window.location.pathname);
// blog/author/jessica-castrogiovanni

Window.location.port

The window.location.port property returns the port through which a web page is served to a user. Web browsers don’t usually show the default port in the address bar for common web protocols, but window.location.port can access them. Sometimes, depending on a server configuration, window.location.port will return an empty string if the default port isn’t shown in the address bar.

The following examples use window.location.port to show the default server ports for http:, https:, and a custom site configuration.

// http://example.com
console.log(window.location.port);  // 80

// https://example2.com
console.log(window.location.port);  // 443

// https://example3.com:2021
console.log(window.location.port);  // 2021

Window.location.protocol

The window.location.protocol property returns the web protocol a web page uses to transfer its information. The most common are http: and https:. These two protocols are similar, but the latter creates a secure connection, while the former does not.

// http://example.com
console.log(window.location.protocol);  // http:

Window.location.assign()

The window.location.assign() method works much like the property window.location.href. It navigates the browser to a new web page. The method has an advantage over the property, though, because the property doesn’t check whether its new URL is valid before trying to navigate.

The window.location.assign() method throws a DOMError if its URL is invalid. This gives developers a chance to catch errors without resorting to complicated URL string matching. Although window.location.href is arguably in more common usage, window.location.assign() is a safer, more robust option.

try {
    window.location.assign("http://example.com");
} catch (e) {
    console.log(e);
}

Conclusion

Window.location is a basic Javascript object that developers commonly rely on to navigate a web browser, but it also has other capabilities that programmers may not immediately be aware of. Changing a page’s address can affect Javascript print and output strategies, as well as raise security concerns.

Enroll in our Intro to Programming Nanodegree Program today to learn more about Window.location and other programming concepts.

Start Learning