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

Question

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

A simple search would have lead you to the answer: stackoverflow.com/questions/824349/… — Griffin
– Griffin, Commented Apr 6, 2012 at 23:30
Do u wish to convert a link "example.com/#about" to "example.com/about" ? In that case u need some .htaccess changes — Prashant Singh
– Prashant Singh, Commented Apr 6, 2012 at 23:35
@griffin thx. but i need a more general working solution eg for ie7+, the solution there cares only about ie10.4+ which is not even widely used. — Email
– Email, Commented Apr 6, 2012 at 23:58

Ry- · Accepted Answer · 2012-04-06 23:31:29Z

1

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.

answered Apr 6, 2012 at 23:31

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Email Over a year ago

what about the scope browserwise (ff 3+?)? what you mean with "when available"?

Ry- Over a year ago

@Email: Check if history.pushState exists first - it's a relatively new HTML5 feature. If it doesn't, just do what you're doing already, and the users will have to have URLs that are a little more complicated.

Ry- Over a year ago

@Email: stackoverflow.com/questions/4612598/…

Email Over a year ago

i guess you mean something like here stackoverflow.com/a/5298684/334833 . seems there is no solution for ie7/8/9 & ff3 :(

nzifnab · Accepted Answer · 2012-04-06 23:34:40Z

1

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.

answered Apr 6, 2012 at 23:34

nzifnab

16.2k3 gold badges53 silver badges67 bronze badges

2 Comments

Email Over a year ago

can my requirements be satisfied with that (IE7+,FF,Opera,Safari)? if not, what else could i take care of? is the backbone.js needed and why? thx

nzifnab Over a year ago

There is no way to do it without using HTML5 pushState unless you are fine with refreshing the page. backbone.js is just a framework to help you organize very ajax and javascript-centric applications and to handle routing and such for you. If you use backbone.js and set the pushState: true option, it will fallback to manipulating the URL hash on those browsers that don't support pushState. You don't need a framework like backbone.js, it just makes things easier to work with. If you want to support IE8 or less, then you will have to have hash support as a fallback.

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related