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');
	});
});

but how include automaticly on page

Better to use a Framework in that case.

nice bro. but i want to implement it on pageload instead of buttons but it didn't work. Moreover, i tend to change the who url instead of merely a part of it. please help.

Please use a framework/library for your case. I don't think you can change the whole url with HTML 5 history api.

I also think that changing the entire url address is rather impossible, although it was hard for me to ask :) 2021-01-10 10:22 GMT+01:00, Hasibur Rahman Omi <[email protected]>:

…

> nice bro. but i want to implement it on pageload instead of buttons but it > didn't work. Moreover, i tend to change the who url instead of merely a > part of it. please help. Please use a framework/library for your case. I don't think you can change the whole url with HTML 5 history api. -- You are receiving this because you commented. Reply to this email directly or view it on GitHub: https://gist.github.com/b23ea8e9e1ad7c5d88349ddf863a7a6f#gistcomment-3588538

-- Pozdrawiam Krystian Broniszewski http://www.programowanienazlecenie.eu http://sipronex.net e-mail : [email protected] tel. kom.: 502 210 454