How to Change The Page URL with JavaScript

Redirecting to a URL is one of the most common activities performed by JavaScript. As such, JavaScript offers multiple different ways to support redirects from the code level. In this article we’ll look at how to change a URL using JavaScript, reviewing each of the potential methods in turn.

1. Using the Location Interface

The first approach uses the Location interface. Take the following sample JavaScript code and HTML markup:

JavaScript

function goGoogle() {
  window.location = 'http://google.com'
}

HTML

<button onclick="goGoogle()">Google it</button>

When the button defined in the HTML above is clicked, it invokes function goGoogle(). This function modifies the window object’s location property, which redirects the user to the main Google Search page.

Syntax

The syntax for redirecting via window.location is as follows:

window.location = URL

This code is flexible, and will work perfectly fine even if you omit the keyword window. Additionally, you can set the href property of location, which will also perform the desired redirect.

Location methods

The location property has several useful methods associated with it. Below are three of the most commonly-used methods:

1. location.assign(URL): This method redirects the user to the specified URL. The user’s browser history will be updated with the new URL visited.
2. location.reload(URL): This method refreshes the current page.
3. location.replace(URL): This method, similar to assign, redirects the user to the specified URL. The critical difference is that the replace() method does not update the user’s browser history (more detail below), preventing the user from navigating back to the current page. This can be helpful when you need to hide a page from being exposed to the user.

Note: In all cases above, the URL parameter is a String.

2. Using the History API

The second approach to changing the URL is using the History API. The browser’s session history is accessible via the history object in JavaScript. This object has several methods, three of which we explore below:

1. back() – this method navigates the user back one entry in their browser history, as though the user pressed the “back” button in their browser.
2. forward() – this method navigates the user forward one entry in their browser history, as though the user pressed the “forward” button in their browser.
3. go(target) – this takes a user directly to an entry. This method takes a parameter, target, which controls the redirection. This can be a URL string, in which case the user is redirected to the URL specified, or a number. If a number is provided, the user is moved forwards (in the case of positive numbers) or backwards (in the case of negative numbers) in their browser history. Passing “0” to this function refreshes the page.

The following example code shows how to use the go() method to navigate the user’s browser history:

JavaScript

function go2pagesBack() {
  history.go(-2)
}

Invoking the go2pagesBack() function is similar to pressing the browser’s back button twice, due to our choice to send “-2” as a parameter to history.go().

Note: If the user does not have enough pages in their history to accommodate the request, the go() method will redirect as far as it can. For example, if you have only one page in your history, history.go(-2) will only go back one page.

3. Create an HTML hyperlink

The final method of redirecting the user is simply creating an HTML hyperlink that controls the navigation. Take the following example HTML markup:

HTML

<a href="http://codota.com/">Codota</a>

● The <a> element defines a hyperlink, with the text between the tags being presented to the user.

● The href attribute sets the link’s destination, redirecting the user to the provided URL.

This method uses HTML only, but can be easily modified as needed using JavaScript.

Note: It is possible to change the href attribute, for instance, by using the setAttribute() method.

Related Articles:

JavaScript – How to Use setAttribute

JavaScript – How to Change CSS

JavaScript – How to Get Cookies