0

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

Email
  • 2,395
  • 3
  • 35
  • 63
  • A simple search would have lead you to the answer: http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page – Griffin Apr 06 '12 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 Apr 06 '12 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 Apr 06 '12 at 23:58

2 Answers2

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.

Ry-
  • 218,210
  • 55
  • 464
  • 476
  • what about the scope browserwise (ff 3+?)? what you mean with "when available"? – Email Apr 06 '12 at 23:42
  • @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- Apr 06 '12 at 23:51
  • @Email: http://stackoverflow.com/questions/4612598/which-browsers-support-the-html5-history-api – Ry- Apr 06 '12 at 23:52
  • i guess you mean something like here http://stackoverflow.com/a/5298684/334833 . seems there is no solution for ie7/8/9 & ff3 :( – Email Apr 07 '12 at 00:15
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.

nzifnab
  • 15,876
  • 3
  • 50
  • 65
  • 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 – Email Apr 06 '12 at 23:43
  • 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. – nzifnab Apr 07 '12 at 00:28