1

If I go to a sub-path of a domain, the normal way is to do <a href="/somepath">Some Path</a>. This will reload the page completely.

But on Facebook, when you open a photo, the url on the address bar changes, however the entire page doesn't reload, it only loads the photo platform. So in this way people can share url of photos. I'm wondering how is this done?

I've done some search and some people suggested using history.pushState, however, this is only working on most modern browsers. The one on Facebook also works on IE 7, I'm wondering how they did it?

Maria
  • 3,455
  • 7
  • 34
  • 47

2 Answers2

2

As you said, history.pushState is only available on modern browsers (noteably IE>=10).

For older browsers, the only way (as far as I'm aware) to change the URL in any way, was to use the "hashbang" technique - using/abusing the ability of hashs in URLs to retain page information. You'd then end up with a URL similar to index.php#!page=x&foo=bar where the hash would be used to represent the current page. The URL would then map one to one with a link such as index.php?page=x&foo=bar, and on refreshing the page, the JavaScript could read back the hash and display the page appropriately. It was by no means a great solution, in particular the browser doesn't correctly store your history, but it was still very popular.

If you're looking to use Ajax to reload pages and change the URL at the same time, then perhaps look into libraries such as History.js / Ajaxify, which will try to use pushState where available, but fall back to using hashbangs where it has to.

You seem to think that facebook supports Ajax for Legacy IE. I'm not aware of this as I can't say IE7 is very often my go-to browser, but IIRC Twitter has far less time for older, less feature-full browsers, and falls back to a much simplified interface (I think it even uses a basic mobile view). I'd probably take a similar stance if it was my website, and make use of pushState where available, and simply offer standalone pages where not. Working on backwards compatibility in these areas has the tendency to be fairly arduous (although the above-mentioned plugins will take quite a considerable load off), and unless you need to offer support, maybe it's just not worth it?

Community
  • 1
  • 1
Ian Clark
  • 9,237
  • 4
  • 32
  • 49
0

I do not know, how facebook did it, but if you look in the "routing" chapter of Backbone.JS you will see, that

For browsers which don't yet support the History API, the Router handles graceful fallback and transparent translation to the fragment version of the URL.

And if you look further, the sourcecode says:

// Backbone.History
// ----------------
// Handles cross-browser history management, based on either
// [pushState](http://diveintohtml5.info/history.html) and real URLs, or
// [onhashchange](https://developer.mozilla.org/en-US/docs/DOM/window.onhashchange)
// and URL fragments. If the browser supports neither (old IE, natch),
// falls back to polling.

This is the mentioned article to onhashchange. That is probably the way to go.

Thomas Junk
  • 5,588
  • 2
  • 30
  • 43