Last active
July 20, 2023 22:47
-
-
Save hasibomi/b23ea8e9e1ad7c5d88349ddf863a7a6f to your computer and use it in GitHub Desktop.
Change URL in Browser Address Bar without reloading using JavaScript and jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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'); | |
}); | |
}); |
krystian-broniszewski
commented
Jan 10, 2021
via email
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment