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
- An input box
- 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.
I am a Software Engineer who enjoy writing about things that interest me. Here on OamaTech I write about programming as well as other tech related topics. Visit my author page to learn more about me and what I am working on right now.