views:

4198

answers:

8

Is there any way I can modify the URL of the current page without reloading the page?

I would like to access the portion before the # hash if possible.

I only need to change the portion after the domain, so its not like I'm violating cross-domain policies.

 window.location.href = "www.mysite.com/page2.php";  // sadly this reloads
+16  A: 

There is no way to modify the URL in the browser without reloading the page. The URL represents what the last loaded page was. If you change it (document.location) then it will reload the page.

One obvious reason being, you write a site on www.mysite.com that looks like a bank login page. Then you change the browser url bar to say www.mybank.com. The user will be totally unaware that they are really looking at www.mysite.com.

Robin Day
I don't want to change the domain, only the path and file name.
Jenko
This still doesn't stop potential security risks as the browser has no idea that domain/mysite and domain/othersite are both considered "safe" by the user. Maybe the question should be why do you want to change the URL? If it is to obscure it from the user, you could simply run your application within an iframe.
Robin Day
You can actually do this with Flash. It will allow you to modify the URL without making a request. This is possible because Flash operates outside of the browser, but very tightly with it.
Nick Berardi
you can change hash / fragment, but definitely not the location / path.
dusoft
I have to say there are perfectly valid reasons for wanting to modify the URL in the address bar client-side. For instance, if you have a table of data with paging, sorting and filtering, and want those things to be Ajax powered, but still update the URL so that the current state of the page is bookmarkable.I can understand the security risks with modifying the domain name (phishing etc.), but why don't browsers allow just the part of the URL to the right of the top level domain to be modifiable via script?
Sunday Ironfoot
this answer is no longer 100% true. See my answer for details.
David Murdoch
The use case is indeed when using Ajax, you may display another document but do not want to reload, yet you want the document to be bookmarkable. In these cases one would like to change the path of the URL without changing the domain, which should be fine from a security standpoint.
Jean Vincent
+3  A: 

Any changes of the loction (either window.location or document.location) will cause a request on that new URL, if you’re not just changing the URL fragment. If you change the URL, you change the URL.

Use server-side URL rewrite techniques like Apache’s mod_rewrite if you don’t like the URLs you are currently using.

Gumbo
Can I use "location.pathname"??
Jenko
No, changing that attribute will cause a request too.
Gumbo
A: 

You could always replace the entire <body> via an AJAX request.

ceejayoz
A: 

Assuming you're not trying to do something malicious, anything you'd like to do to your own URLs can be magicked into being with htaccess.

Hexagon Theory
htaccess only works with server requests. Hashtags are not sent to the server, therefore htaccess rewriting can not work.
Sam V
+6  A: 

parent.location.hash = "hello";

I want to change the URL, not just the hash -- #mydata
Jenko
Changing the hash can be useful in ajax as it's a kind of state without using cookies, is bookmarkable, and compatible with browser back buttons. Gmail uses this nowadays to make it more browser friendly.
Matthew Lock
+2  A: 

You can add anchor tags. I use this on my site http://www.piano-chords.net/ so that I can track with google analytics what people are visiting on the page. I just add an anchor tag and then the part of the page I want to track.

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);
Nate
+4  A: 

This can now be done in Chrome, Safari, and the up-and-coming FF4!

See this question's answer for more info: http://stackoverflow.com/questions/3338642/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;
    }
};
David Murdoch
+2  A: 

HTML5 introduced the history.pushState() and history.replaceState() methods, which allow you to add and modify history entries, respectively.

window.history.pushState('page2', 'Title', '/page2.php');

Read more about this from here

Vivart