Adding history states in a backbone.js Facebook app (in iframe)

Question

I am developing a Facebook app that uses backbone.js 0.3.3 and am trying to get the back button to work properly for users.

Backbone saves the state through the URL hash, which is used to do internal routing. For example, #home will load the homepage and #session is another page. History is saved when this happens outside an iframe, so you can navigate correctly using the back button.

Navigation inside the iframe is not the problem, and all the links work, but no history is saved by the browser.

The question:

The Facebook iframe points to http://app.example.com, which is the Backbone application. How can I get the back button to work for the user on the Facebook app? Bonus points for an existing solution using Backbone.

---

I have looked into this question from several angles and can't find a satisfactory solution available anywhere. It seems like very few Facebook apps use backbone/rely so much on Javascript.

I think that the solution is to add history states to the parent window of the iframe, but I don't know how to do that. HTML5 history? Some sort of Facebook API? Even a partial solution (for modern browsers) is preferable to the current situation.

Answer 1

I think your Facebook Application is in a sandbox what they call Canvas. Because it's a sandbox, it's not a direct iframe with the source code from your website. The fact is, Facebook read the source code from your website, put it into their sandbox and render the sandbox in the iframe.

I'm not sure if this is still true. In old Facebook Applications, within this sandbox, many JavaScript APIs are hijacked. For example document.getElementById is not the original document.getElementById. It's something else, which can only retrieve elements within the sandbox. They make sure that almost all JavaScript APIs you would use will act as you expect but without the ability to reach anywhere outside of the sandbox.

One problem is that they don't mock the original window.location behavior. I think that's because they expect that it should be outside of your scope. Your application lives in the canvas (sandbox) and the sandbox lives in the iframe. So the iframe should be something out of your reach.

I don't have any idea of implementing a history API support in Facebook Canvas so far. Because the whole page is hijacked by Facebook and you can't put anything in Facebook's domain, your page is actually in a domain you can't control. With a situation like this, I can't think of a possible solution so far.