CODEWITHSUNDEEP
phpjqueryajaxurl
Email
Email

Reputation: 2425

Remove hash (#) from url in Ajax navigation without refresh

I have an ajax navigation similar like here.

now if a menu is clicked window.location.hash is added like this #about

i want to REmove the hash (#) so that people can easily copy and share the link naturally.

How this can be done in april 2012 without a pagerefresh crossbrowserwise (IE7+,FF,Opera,Safari) ?

For inspiration: Here is actually someone already doing this, click on "portfolio" or "features" and watch the url in your browser.

thanks for tips

Upvotes: 0

Views: 1962

Answers (2)

nzifnab
nzifnab

Reputation: 16092

What you are looking for is called pushState: http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate

HTML5 gives us access to a browser's browsing history and let's us manipulate it on-the-fly:

window.history.pushState(data, "Title", "/new-url");

This manipulates the current page to display '/new-url' as the url and 'Title' as the title of the page. There are some javascript libraries that will handle this for you such as backbone.js.

If you share the URL you will need to command your app to feed the right content still (or just feed your 'base' javascript app that feeds the content for you).

Hopefully this gets you pointed in the right direction.

Upvotes: 1

Ry-
Ry-

Reputation: 224877

Use the history API when available. Instead of setting the hash (on browsers that support it), go:

history.pushState({ /* Some state object */ }, "A title representing this state");

Then, handle the state change in a popstate event listener. Doing things this way means the URL won't change, but history will still be fully functional.

Upvotes: 1

Related Questions