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
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.
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.
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.
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);
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;
}
};