We Keep Coding

Remove hash from URL, load the page at hash-less URL, then add hash to URL without reloading the page

I'm working on a website that uses AJAX loading with some jQuery animations.
With JavaScript, I grab the href from a dynamically generated link to a PHP-based page, and then add that href to URL (after the inevitable #/) .
So far so good, except if a user bookmarks the page and tries to access it, that user will arrive to the home page, instead of the page he/she expected to access.
So, when a page is accessed directly, not by clicking on the internal link of the website, I want to remove #/ from the url, but keep everything after it, so that URL that was bookmarked like this:
http://www.mysite.com/#/somepage
gets rewritten as this:
http://www.mysite.com/somepage
THEN, after the proper page ( http://www.mysite.com/somepage ) finished loading, I want to stick #/ back into its former place in URL ( http://www.mysite.com/#/somepage ), without reloading the page (which, thanks to a clever snippet I'm using, will ensure that the rest of the navigation works the way it should.)
So:
Before page loads, check URL and if it has #/, remove it.
Load page located at hash-less url
Redisplay the url with #/, without reloading the page.
Is it even doable? If yes, I'd be grateful for a lesson.

What you are trying to do is doable but an utter PITA to maintain, and it will not be available on all browsers. That aside, the key resides in the history object relatively recently extended to add a new set of "tricks". Its full doc is available from MDN.
What you are after to do this is the replaceState command. Reads as follows:
Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL. The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized. Note that Firefox currently ignores the title parameter; for more information, see manipulating the browser history.
This will allow you to replace your current page in the history of the browser, but not in the URL. The URL will be exactly as you have it - with the hash. No point changing it considering your solution.
However, you will have to make sure that your hashless page redirects to the hash-present page for clients with the history object, for consistency. That's the only requirement.

Before page loads, check URL and if it has #/, remove it.
Not possible. The fragment id is not sent to the server, so you can only access it with client side code and that requires the page to load (or at least to start loading).
Load page located at hash-less url
Redisplay the url with #/, without reloading the page
Use XMLHttpRequest to get the data, DOM to change the document to use it, and the history API to change the URL in the address bar.

As has been pointed out in one of the answers, you can't remove hash before your page loads.
However, once the page started loading, the manipulation described in the question is possible.
Here's one way to do it.
// Remove the hash and reload the page at url without hash
if (window.location.href.indexOf('/#/')>=0) {
window.location = window.location.href.replace(/\/#\//, '/');
}
Once the new page started loading, you can use history.pushState to update the URL display:
if ((window.location.href.indexOf('/#/')<1) && (location.pathname != "/")) {
history.pushState({}, "page x", location.protocol + '//' + location.host + '/#' + location.pathname);
}
You gotta keep in mind though that pushState is only available for browsers started with Gecko 2.0, so placing the hash back into the url will not work in older browsers, period.
This may lead to some unfortunate situations. For example, hypothetically, your url http://www.mywebsite.com/somepage gets indexed by a search engine. A user clicks on that link, accessing your website in an older browser that doesn't support pushState, and then clicks on some other link when browsing your AJAX-enabled website. That user is likely to arrive to
http://www.mysite.com/somepage/#/someotherpage
And then, as the user keeps clicking, it will only keep getting worse:
http://www.mysite.com/somepage/#/someotherpage/#/yetanotherpage/#/andsoon/#/andsoforth/
So what you probably need is something to make sure that your hashes don't keep propagating.
You can also wrap your hash removing / replacing code in a conditional:
if (history.pushState) {
// add hash
} else {
// provide some alternative
}
Finally, look into these two resources. You may not need the hash at all: History.js and jQuery Address.

How to remove parameters in URL and display it in address bar without causing redirect in Javascript?

I have found numerous answers on how to extract the URL without the parameters.
How do you rewrite the URL in the address bar without causing the page to reload with the new URL?
shortURL = top.location.href.substring(0, top.location.href.indexOf('?'));
top.location.href = shortURL // Causes redirect
The goal is to extract the parameters in Javascript but not display them in the address bar.

In modern browsers with support for the History object, you can use either history.replaceState() or history.pushState() to change the current URL without changing the current page. There are limitations on what you can change (for example, you cannot change the domain/origin this way for security reasons).
See here for a summary of these methods.
The browser history is a recording of where you have been in your browsing session. .replaceState() allows you to replace the current item in the history list with a different one. .pushState() adds a new item to the browser history and both change the URL displayed in the browser URL bar without reloading the page. You select which method to use depending upon how you want the browser's "back" button to behave for this particular page entry.
Note: These APIs are supported in IE 10 and later.
In older browser versions without support for the history API, the only part of the URL you can change without reloading the page is the hash tag (the part after a # symbol) at the end of the URL.

In html5, rewriting url without reloading the page is possible (still you can not change the domain name for security reasons), using history api you can write:
history.replaceState("object or string", "title", "/another-new-url");
in which the first two parameters are somehow arbitrary, and the third parameter is the new url (not including domain name). If you want to enable back button for returning to previous url, use pushState instead of replaceState above. Read more about these functions in this blog post.
Regarding browser support, it is supported in recent Firefox and Chrome versions, but only in IE10+, which is not very common yet. For details see compatibility matrix or browser implementation details.

You can't change the value in the address bar without redirecting. That would be a phishing scammer's dream come true!
You can, however, change the fragment identifier: (in JavaScript, the window.location.hash value)
<!DOCTYPE html>
<html>
<head>
<title>This is a test</title>
<script>
window.onload = function() {
window.location.hash = "Loaded!";
document.getElementById("click-me").onclick = function() {
window.location.hash = "Click!";
document.getElementById("click-me").onclick = function() {
window.location.hash = "Clicked AGAIN!";
};
};
}
</script>
<body>
<div>
<input type="button" id="click-me" value="click me!" />
</div>
</body>
</html>
But changing the query string will redirect the page.

You might be able to use the new pushstate that is part of the HTML 5 history API, which allows you to change the URL without actually reloading the browser.
Check http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate for a quick example, and http://diveintohtml5.info/history.html for more in depth examples and limitations:

I don't think that there is a possibility for that, I mean you probably could rewrite the URL after its loaded and add return false, so you prevent the reload but otherwise you would have to do a form POST on the url to achieve that no parameter is shown.

Read address bar url from a flash site

my dear friends..
I have a flash site, where when a user clicks on a link the page does not reload but the content changes with flash(like any normal flash site). So for example if user click on products page, the product page content is displayed, and the url in the address bar also changes from "domainname/index.aspx" to "domainname/index.aspx#/products"
I need to get this url from the address bar, and if i use "window.location.href" it returns "domainname/index.aspx". Does anyone know whether it is possible to read the url from the address bar which is changed by the flash.
Thanks in advance !!

Under ActionScript 3 (not sure about other versions), it is possible to invoke JavaScript functions in the client. You could use an ExternalInterface call to call a function that returns the URL from JavaScript (which should just be window.location).

The last part of the URL (after the # character) is know as the hash and you can read it with location.hash ;)

I would give jQuery history plugin a try. It detects when the URL changes with a hash etc.
http://tkyk.github.com/jquery-history-plugin/
And you could simply send the Flash object the url when the jQuery history plugin detects a change :)

Change url via JavaScript (no hash-tag)

I'm wondering how does facebook change the url when I switch between pictures in a album? There is no hash-tag, just a real url.
Example:
The current url: facebook.com/photo.php?fbid=XXXXXX1 and if I click next, the url changes to facebook.com/photo.php?fbid=XXXXXX2
Does anybody know how to realize this with JavaScript?

Yes. Check out https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries
It pushes a new history state (an HTML5 thing) instead of using the hash key.

My first hunch would be:
document.location = facebook.com/photo.php?fbid=XXXXXX2;
With some way of preventing the default reload page action.

Summerizing all the answers,
we can say (I'm not a FB coder) that Facebook uses:
the HTML5 window.history.pushState / replaceState / popState methods on browser that support these methods (I think one is Chrome). In this way Facebook changes the real url (not just the part after the # character).
On other browsers, that do not support these new HTML5 methods (like IE6 / IE7 and IE8), Facebook simply changes the part of the url after the # character, by simply setting the the window.location.hash property.

On my tests, it only changes the hash tag:
E.g. the real URL is:
http://www.facebook.com/photo.php?fbid=x&set=z
and clicking next results in:
http://www.facebook.com/photo.php?fbid=x&set=z#!/photo.php?fbid=y&set=z&pid=pid&id=id
The part after the hash is setup for Google AJAX crawl. But for the purpose of the browser, it's just a hash (fragment identifier).

How to automatically replace `url` in browser address bar with JavaScript: from /en/services/ to /en/#services?

How to automatically replace url in browser address bar with JavaScript
from company.com/en/services/
to company.com/en/#services
?
Example: when I type in browser address bar url company.com/en/services/ and click 'Go', it will be automatically seen company.com/en/#services
Is there any way to replace real url /services/ with hash url /#services without browser refresh and no redirecting? Does jQuery has some solution for that?

You can't change the URL with Javascript for the current page. You can only change the hash like this (without causing a refresh):
window.location.hash = '#services';
So when you're at the page company.com/en/ and then click something, you could then set the window.location.hash. For example, it could be changed to company.com/en/#anything_you_set. The only other way is to do what Pekka suggested and reload the page.
If you want them to type the url and have it change to the hash, you're going to have to look up URL Rewriting (at least for ASP.NET and IIS). If you're on IIS7, you can use the URL Rewrite Module.
If you're on apache, you can read this URL rewrite tutorial.

You could do something like this:
$(document).ready(function() {
window.document.location.href = 'company.com/en/#services'
});

I'd go with:
<script>
document.replace("/en/#services");
</script>
<meta http-equiv="refresh" content="0;url=/en/#services" />
on /en/services/
Document.replace(url) will have the browser load the new page, and the old one won't be in the history, so when the user hits back, they won't get stuck in loop. The meta catches people without JS.
I don't think that you can't reliably do this with a server-side redirect, as many browsers (and the HTTP spec) consider the hash client-side only, and so it doesn't survive the redirect.

I found the solution in http://www.asual.com/jquery/address/.