131

I have the following code that changes the pages from within JavaScript:

var newUrl = [some code to build up URL string];
window.location.replace(newUrl);

But it doesn't change the top URL, so when someone clicks the back button it doesn't go back to the previous page.

How can I have JavaScript change the top URL as well so the browser back button works.

7 Answers 7

215
document.location.href = newUrl;

https://developer.mozilla.org/en-US/docs/Web/API/document.location

0
62

Simple assigning to window.location or window.location.href should be fine:

window.location = newUrl;

However, your new URL will cause the browser to load the new page, but it sounds like you'd like to modify the URL without leaving the current page. You have two options for this:

  1. Use the URL hash. For example, you can go from example.com to example.com#foo without loading a new page. You can simply set window.location.hash to make this easy. Then, you should listen to the HTML5 hashchange event, which will be fired when the user presses the back button. This is not supported in older versions of IE, but check out jQuery BBQ, which makes this work in all browsers.

  2. You could use HTML5 History to modify the path without reloading the page. This will allow you to change from example.com/foo to example.com/bar. Using this is easy:

    window.history.pushState("example.com/foo");

    When the user presses "back", you'll receive the window's popstate event, which you can easily listen to (jQuery):

    $(window).bind("popstate", function(e) { alert("location changed"); });

    Unfortunately, this is only supported in very modern browsers, like Chrome, Safari, and the Firefox 4 beta.

3
  • the .replace method on strings will not change the string it was applied to, it will generate a new string." - the window.location.replace() method isn't the same as the String.prototype.replace() method because window.location isn't a string (it's an object). window.location.replace() replaces the current URL with a new one, whilst overwriting the old URL's entry in the history.
    – Andy E
    Oct 2, 2010 at 18:50
  • 1
    Thanks for the correction, I'll update my answer accordingly.
    – bcherry
    Oct 6, 2010 at 2:10
  • 3
    Looking back, this is by far the best answer. document.location.href has nothing on pushState
    – buley
    Feb 15, 2011 at 1:21
14

If you just want to update the relative path you can also do

window.location.pathname = '/relative-link'

"http://domain.com" -> "http://domain.com/relative-link"

10

Hmm, I would use

window.location = 'http://localhost/index.html#?options=go_here';

I'm not exactly sure if that is what you mean.

9

This will do it:

window.history.pushState(null,null,'https://www.google.com');
1
<script> 
    var url= "http://www.google.com"; 
    window.location = url; 
</script> 
0

The best way to redirect the user to another URL is by using window.location.assign (See https://developer.mozilla.org/en-US/docs/Web/API/Location/assign).

Nevertheless, if what you want is to change the URL of the page without redirecting the user, then you may use the window.history.replaceState function (See https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState). A combination of this and window.history.pushState is what Single Page Applications (SPAs) use nowadays to keep track of the user navigating throughout the application so that the back button works as expected

You can take a look at the examples in the documentation links I provided to give you an idea on the usage of these functions

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.