Change the URL in the browser without loading the new page using JavaScript
Solution 1
With HTML 5, use the history.pushState
function. As an example:
<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>
and a href:
<a href="#" id='click'>Click to change url to bar.html</a>
If you want to change the URL without adding an entry to the back button list, use history.replaceState
instead.
Solution 2
If you want it to work in browsers that don't support history.pushState
and history.popState
yet, the "old" way is to set the fragment identifier, which won't cause a page reload.
The basic idea is to set the window.location.hash
property to a value that contains whatever state information you need, then either use the window.onhashchange event, or for older browsers that don't support onhashchange
(IE < 8, Firefox < 3.6), periodically check to see if the hash has changed (using setInterval
for example) and update the page. You will also need to check the hash value on page load to set up the initial content.
If you're using jQuery there's a hashchange plugin that will use whichever method the browser supports. I'm sure there are plugins for other libraries as well.
One thing to be careful of is colliding with ids on the page, because the browser will scroll to any element with a matching id.
Solution 3
window.location.href contains the current URL. You can read from it, you can append to it, and you can replace it, which may cause a page reload.
If, as it sounds like, you want to record javascript state in the URL so it can be bookmarked, without reloading the page, append it to the current URL after a # and have a piece of javascript triggered by the onload event parse the current URL to see if it contains saved state.
If you use a ? instead of a #, you will force a reload of the page, but since you will parse the saved state on load this may not actually be a problem; and this will make the forward and back buttons work correctly as well.
Solution 4
I would strongly suspect this is not possible, because it would be an incredible security problem if it were. For example, I could make a page which looked like a bank login page, and make the URL in the address bar look just like the real bank!
Perhaps if you explain why you want to do this, folks might be able to suggest alternative approaches...
[Edit in 2011: Since I wrote this answer in 2008, more info has come to light regarding an HTML5 technique that allows the URL to be modified as long as it is from the same origin]
Solution 5
jQuery has a great plugin for changing browsers' URL, called jQuery-pusher.
JavaScript pushState
and jQuery could be used together, like:
history.pushState(null, null, $(this).attr('href'));
Example:
$('a').click(function (event) {
// Prevent default click action
event.preventDefault();
// Detect if pushState is available
if(history.pushState) {
history.pushState(null, null, $(this).attr('href'));
}
return false;
});
Using only JavaScript history.pushState()
, which changes the referrer, that gets used in the HTTP header for XMLHttpRequest objects created after you change the state.
Example:
window.history.pushState("object", "Your New Title", "/new-url");
The pushState() method:
pushState()
takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL. Let's examine each of these three parameters in more detail:
-
state object — The state object is a JavaScript object which is associated with the new history entry created by
pushState()
. Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.The state object can be anything that can be serialized. Because Firefox saves state objects to the user's disk so they can be restored after the user restarts her browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to
pushState()
, the method will throw an exception. If you need more space than this, you're encouraged to use sessionStorage and/or localStorage. -
title — Firefox currently ignores this parameter, although it may use it in the future. Passing the empty string here should be safe against future changes to the method. Alternatively, you could pass a short title for the state to which you're moving.
-
URL — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to
pushState()
, but it might attempt to load the URL later, for instance after the user restarts her browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise,pushState()
will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.
Related videos on Youtube
Comments
-
Steven Noble over 3 years
How would I have a JavaScript action that may have some effects on the current page but would also change the URL in the browser so if the user hits reload or bookmark, then the new URL is used?
It would also be nice if the back button would reload the original URL.
I am trying to record JavaScript state in the URL.
-
harpo about 14 yearsThis would be so nice. Of course it would be limited to same-domain modifications. But some client-side control of the path (and not just hash) is a logical step now that page reloads are a kind of "last resort" for many apps.
-
Derek 朕會功夫 about 12 yearsA "sort-of" good use of
pushState
:for(i=1;i<50;i++){var txt="..................................................";txt=txt.slice(0,i)+"HTML5"+txt.slice(i,txt.length);history.pushState({}, "html5", txt);}
-
Ben over 11 yearsexample of this effect in action: dujour.com
-
Admin over 11 yearsExample of this effect: facebook.com (When opening images in the lightbox)
-
dewd about 10 yearsthis is a good question. however, its a sad situation in that if thiis question had been asked in this way today, it would have been downvoted and jumped on by the "this is not the kind of site you get people to write all your code for you".
-
-
Drew Noakes about 15 yearsDon't search engines ignore these internal links (hashes)? In my scenario I want spiders to pick up on these links too.
-
Matthew Crumley about 15 years@Drew, as far as I know, there's no way for search engines to treat a part of a page as a separate result.
-
LKM over 14 yearsThere is now a proposal to make search engines see hashes: googlewebmastercentral.blogspot.com/2009/10/…
-
Ollie Saunders almost 14 yearsNot so much of an issue if non-reload changes were restricted to the path, query string, and fragment—i.e. not the authority (domain and such).
-
Spidfire over 13 yearsyoutube.com/user/SilkyDKwan#p/u/2/gTfqaGYVfMg is a example that it is possible, try switching videos :)
-
kliron over 13 yearsYou can only change the location.hash (everything after the #), as Matthew Chumley notes in the accepted answer.
-
clu3 over 13 yearsYou're right, last time i experimented with Chrome. I just now tried with Firefox 3.6 on my Ubuntu, it didn't work. I guess we'll have to wait until HTML5 is fully supported in FF
-
mikemaccana over 13 yearsSample code is cut and pasted from developer.mozilla.org/en/DOM/Manipulating_the_browser_history . Which actually bothers explaining what foo and bar mean in this case.
-
kliron over 13 yearsThe foo and bar don't mean anything, it's an arbitrarily defined state object that you can get back later.
-
mikemaccana over 13 years@Paul: yep, the article above provides that info.
-
Irae Carvalho over 13 yearsInstead of using
setInterval
to inspect thedocument.location.hash
one can use thehashchange
event, as it's much more adopted. Check here for what browsers support each standard. My current approach is to use push/popState on browsers that support it. On the others I set the hash and only watch thehashchange
in supporting browsers. This leaves IE<=7 without history support, but with usefull permalink. But who cares for IE<=7 history? -
Sid almost 13 yearsAS of posting this comment it works on firefox chrome and safari. No luck with mobile safari on the ipad or iphone though :(
-
ripper234 over 12 yearsTake a look at this demo of using window.location.hash: jsbin.com/ezopap/5#Hello%20World
-
Derek 朕會功夫 about 12 yearsDo you use Facebook? Facebook changes the URL without reloading, using
history.pushState()
. -
Derek 朕會功夫 about 12 yearsSorry but your answer is not true. Yes you can change the URL.
-
Jethro Larson about 12 yearsYes you can use the html5 history api but it's not cross-browser, though you can use a poly-fill that will fallback to hash urls.
-
gabeio almost 12 yearsIf you ajax request the new page and re-implement the javascript tag that google gives you for google analytics will this not get the hashtag information and register this as a new page visit?
-
Matthew Crumley almost 12 years@gabeDel Yes, although I don't think Analytics records the hash, so it would have the same URL. A better way would be to manually call
_trackPageview
with the "real" URL of the new page. -
Dheeraj Thedijje almost 10 yearsPaul Dixon, you should notice facebook inbox, when you click on names on left side, just URL is changed and new chat is loaded in chat box, page does not refreshed. also there are lots more site on WebGL they do the same
-
Amin.Qarabaqi about 5 yearsthank for response. i think replaceState would be a better choice:
history.replaceState({"test":"test}, document.title, "bar.html");
-
Viktor Borítás about 4 yearsi still don't 100% get what is/was the original purpose of the state object (after reading the linked article(s). How to make best use of it?