JavaScript Change Address Bar Without Reload

TL;DR: Here are code snippets you can use to change the address bar without reloading the page. Check out the post for an example application showing how to use these.

// Option #1
window.history.replaceState(stateObject, title, path);

// Option #2
window.history.pushState(stateObject, title, path);

In this post we are going to build an application where you enter some text in an input box, and and we will insert that text into the address.

How to use JavaScript to change the address bar without reloading the page

We will look at two different ways we can achieve this. Both of them will work with window.history. Before we get into creating the application, lets look more closely at the two methods we will be using.

Both of these methods look quite similar.

1. Using .replaceState to change the address bar

The .replaceState function modifies the the current entry in the history, and allows you to set the state object, title, and url path. There will be no checking if the page that you set actually exists on your website or not. One potential use case of this would be to develop a single page application that looks like you are visiting different pages, but you are actually just replacing the text in the address bar and staying on the same page.

Here is one potential way of using .replaceState(…).

function updateUrlPath(stateObject, title, path){
    window.history.replaceState(stateObject, title, path);
}

The stateObject can either be an object (it can be null), or a string.

2. Using .pushSate to change the address bar

pushSate(…) creates a new history entry instead of modifying the existing one. Because it is creating a new entry, that also means that the back button will work.

Here is a function showing one way you could use .pushState().

function updateUrlPath(stateObject, title, path){
    window.history.pushState(stateObject, title, path);
}

Building the address bar application

Now that we know two methods to change the address using JS, lets get started on the application. For this example we are going to use the replaceState function. Since we dont care about having a back button functionality this makes sense.

You can find the complete solution embedded at the bottom of the page.

What we will need

1. An input box
2. A button to initiate the address change

We dont need that many things. Let us start by adding the input box.

Adding input box

We will grab the input from this box and insert it into the address bare using .replaceState(…).

<input id="newAddress"></input>

Adding the button

<button id="initiateChange">Update</button>

We will listen for clicks on the button, and each time it is clicked we get the value from the input box and use it as input for .replaceState(…).

Adding JS code to change address bar text

var button = document.getElementById("initiateChange"); 

button.addEventListener("click", function(){ 
    var newPath = getInput("newAddress");
    updateUrlPath("", "NewTitle", newPath);
}

function updateUrlPath(stateObject, title, path){
    window.history.replaceState(stateObject, title, path);
}

function getInput(id){ 
    return document.getElementById(id).value; 
}

That is pretty much all the JavaScript code we need. This will listen to clicks on the button, and for each button click it will take the input and call the replaceState function.

Working Application

Try adding some path in the box below, and when you click the button the address bar text should change.

Update