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 t

Solution 1:

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.

Solution 2:

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.

Solution 3:

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.