How to Modify URL Without Reloading Page in JavaScript

JavaScript allows you to easily manipulate web pages to accomplish different kinds of requirements. By default, if you need to change the URL on client web browser, you need to redirect the user to another page. But sometimes you may want to modify URL without reloading page in JavaScript. For example, you may not reload a page fully if you just need to modify the page based on an AJAX response. In this article, we will learn how to modify URL without reloading page in JavaScript.

How to Modify URL Without Reloading Page in JavaScript

In Chrome, Safari, Firefox 4+, and IE 10pp4+, it is very easy to change browser URL without reloading page. We will be using the JavaScript History API for this purpose. It supports methods to manipulate browser history, going forward and backward as per history items.

Let us first define a JavaScript function to accomplish this.

function goTo(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
  window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

In the above function, we input urlPath which is the new URL stub after domain name that you want to add to browser URL. We will also change page’s title to suite the new URL, but this is optional.

We have derived the state and page title from response object, since this feature is mostly used as a response to AJAX call. If you are going to call the function explicitly not in response to any other function call, then you can modify the above function to use 3 arguments – state, title and new URL as shown below – instead of deriving them from response object.

function goTo(page, title, url) {
    history.pushState({page: page}, title, url);
}

We use window.history.pushState() function to basically change the URL. It takes 3 arguments – state object, page title, and new URL stub. Here is the syntax of pushState().

The window.history.pushState() method accepts three arguments:

state: This is an object or string with details about the URL

title: The title (normally the <title> attribute)

url: The actual URL you see in your browser bar.

window.history.pushState("object or string", "Page Title", "/newURL");

Here is an example to change the URL to https://example.com/page2.php

window.history.pushState('page2', 'Title', '/page2.php');

This function will update URL and push it into your browser history without reloading the page.

If you don’t want to add new history item but instead modify the existing history, then use replaceState() function instead of pushState() function. It has the same syntax as pushState() but will replace the history entry of current URL, instead of adding a new one to it for the new URL.

If you want to check if pushState() function is supported on client’s web browser before calling it, then you can modify the above function as shown below.

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');

In the above function, we first check if pushState() function is supported on user’s browser. If so, then history.pushState() function is called to modify the page’s URL and title. Else use is redirected to new page.

If the above code does not work for you, you can also try the following code which does the same thing. Replace the arguments of pushState() function as per your requirements.

if (history.pushState) {
    window.history.pushState("object or string", "Page Title", "/newURL");
} else {
    document.location.href = "/newURL";
}

In this article, we have learnt how to modify URL without reloading. This is useful if you are fetching response using AJAX and don’t want to change the current state of your web page. It is also useful if yu are making small changes that does not deserve a full page refresh. Here are the web browsers that support this feature.

• IE 10+
• Edge
• Firefox 4+
• Chrome 5+
• Safari 6+
• Opera 11.5+

In other browsers, you will need to redirect users to the new URL.

Also read:

How to List All Virtual Environments in Python
How to Transfer MySQL Database from One Computer to Another
How to List Installed PHP Modules in Linux
Fix “Too Many Authentication Failures” SSH Error
How to List All Virtual Hosts in Apache