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

changeurl.js

/* The solution found here: http://www.aspsnippets.com/Articles/Change-URL-in-Browser-Address-Bar-without-reloading-using-JavaScript-and-jQuery.aspx */

/** 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 exists. 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.
 */

/** Using 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.");
    }
}

/** Using jQuery */
$(function () {
	/** ChangeUrl() referes to the function above. */
	$("#button1").click(function () {
		ChangeUrl('Page1', 'Page1.htm');
	});
	$("#button2").click(function () {
		ChangeUrl('Page2', 'Page2.htm');
	});
	$("#button3").click(function () {
		ChangeUrl('Page3', 'Page3.htm');
	});
});