Updating address bar with new URL without hash or reloading the page
You can now do this in most "modern" browsers!
Here is the original article I read (posted July 10, 2010): HTML5: Changing the browser-URL without refreshing page.
For a more in-depth look into pushState/replaceState/popstate (aka the HTML5 History API) see the MDN docs.
TL;DR, you can do this:
window.history.pushState("object or string", "Title", "/new-url");
See my answer to Modify the URL without reloading the page for a basic how-to.
How do I modify the URL without reloading the page?
This can now be done in Chrome, Safari, Firefox 4+, and Internet Explorer 10pp4+!
See this question's answer for more information:
Updating address bar with new URL without hash or reloading the page
Example:
function processAjaxData(response, urlPath){
document.getElementById("content").innerHTML = response.html;
document.title = response.pageTitle;
window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
}
You can then use window.onpopstate
to detect the back/forward button navigation:
window.onpopstate = function(e){
if(e.state){
document.getElementById("content").innerHTML = e.state.html;
document.title = e.state.pageTitle;
}
};
For a more in-depth look at manipulating browser history, see this MDN article.
Change URL in address bar without having to reload
You can in newer browsers; in older ones, you can only change the hash. This seems like a good article on the topic:
http://html5doctor.com/history-api/
Change URL in browser address bar without reload existing page
Here is a similar question.
Here is an example:
function processAjaxData(response, urlPath){
document.getElementById("content").innerHTML = response.html;
document.title = response.pageTitle;
window.history.pushState(
{
"html":response.html,
"pageTitle":response.pageTitle
},
"",
urlPath
);
}
How do you change the URL in the address bar without reloading the page?
You use the new HTML5 history API to push a new state.
Here's the MDN documentation and a good tutorial.
Beware that doing this is often painful (you have to manage correctly the state of your application) and it doesn't work with IE9. It's almost always combined with ajax : it's the solution to let dynamically loaded content be bookmarkable even while the whole page isn't reloaded or changed.
how to change url at address bar without reloading the page
you can't change the URL in the address bar without changing the page because to be able to do that I couldlet you visit me at http://www.imhackingyou.com/sucker but change the addressbar to read http://www.bankofamerica.com/login
Related Topics
Is There a Cross-Browser Onload Event When Clicking the Back Button
Enter Data into a Custom-Handled Input Field
How to Disable Right Click on My Web Page
In JavaScript, Does It Make a Difference If I Call a Function With Parentheses
How to Check That a Number Is Float or Integer
Usage of the Backtick Character (') in JavaScript
Reactjs Component Names Must Begin With Capital Letters
Programmatically Navigate Using React-Router
JavaScript Window Resize Event
How to Add 1 Day to Current Date
How to Get the Full Object in Node.Js'S Console.Log(), Rather Than '[Object]'
Fastest Way to Duplicate an Array in JavaScript - Slice Vs. 'For' Loop
Origin Null Is Not Allowed by Access-Control-Allow-Origin
How to Set Object Property (Of Object Property Of..) Given Its String Name in JavaScript
Does JavaScript Have a Method Like "Range()" to Generate a Range Within the Supplied Bounds
JavaScript "New Array(N)" and "Array.Prototype.Map" Weirdness