Change URL in Browser Address Bar Without Reloading

Change URL in Browser Address Bar without reloading using JavaScript and jQuery.

Introduction

 

In this blog I want to share idea about how to change the URL in browser address bar without reloading or refreshing the page using HTML5 History API in JavaScript and jQuery.
 HTML5 History API allows browsers to change the URL in the browser address bar without reloading or refreshing the page using pushState function.

 

HTML5 History pushState method

 

The pushState method works similar to window.location but it does not refresh or reload the page and it will modify the URL even if the page does not exist. The pushState method actually inserts an entry into the history of the browsers which allows us to go back and forth using the browser’s forward and back buttons.

 

The pushState method accepts the following three parameters.

1.  State object - The state object is a JavaScript object which can contain any details about the page and must be serializable.
2. Title - The title of the page.
3. URL – The URL of the page.

Change URL in Browser Address Bar without reloading using JavaScript

 

The HTML Markup consists of 3 buttons which make a call to a function ChangeUrl. This function accepts the page Title and URL as parameters.

 

It first checks whether browser supports HTML5 and if yes then a State object containing the page Title and URL is created and is passed to the HTML5 History pushState method along with the page Title and URL as the other two parameters.

<script type="text/javascript">
function ChangeUrl(title, url) {
    if (typeof(history.pushState) != "undefined") {
        var obj = { Title: title, Url: url };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        alert("Browser does not support HTML5.");
    }
}
</script>
<input type="button" value="Page1" onclick="ChangeUrl('Page1', 'Page1.htm');" />
<input type="button" value="Page2" onclick="ChangeUrl('Page2', 'Page2.htm');" />
<input type="button" value="Page3" onclick="ChangeUrl('Page3', 'Page3.htm');" />

Change URL in Browser Address Bar without reloading using jQuery

 

The HTML Markup consists of 3 buttons to which the jQuery click event handler has been assigned. Inside the jQuery click event handler, a function ChangeUrl is being called which accepts the page Title and URL as parameters.

 

This function first checks whether the browser supports HTML5 and if yes then a State object containing the page Title and URL is created and is passed to the HTML5 History pushStatemethod along with the Page Title and URL as the other two parameters.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function ChangeUrl(page, url) {
    if (typeof(history.pushState) != "undefined") {
        var obj = { Page: page, Url: url };
        history.pushState(obj, obj.Page, obj.Url);
    } else {
        alert("Browser does not support HTML5.");
    }
}
$(function() {
    $("#button1").click(function() {
        ChangeUrl('Page1', 'Page1.htm');
    });
    $("#button2").click(function() {
        ChangeUrl('Page2', 'Page2.htm');
    });
    $("#button3").click(function() {
        ChangeUrl('Page3', 'Page3.htm');
    });
});
</script>
<input type="button" value="Page1" id="button1" />
<input type="button" value="Page2" id="button2" />
<input type="button" value="Page3" id="button3" />

The output will look like this. When you click on the buttons it will not reload the pages but the address will change on the address bar.