Hacker News new | ask | show | jobs
by cmer 5275 days ago
I'm going through this now so I'm equally excited. A little bit off-topic, but how did you deal with the back button problem?

Currently, if my user navigates a few pages deep in my app and clicks the back button, it exits the app and goes back to Facebook. Quite annoying... Thanks!

3 comments

Because the app is in an iFrame, you can just use regular linked files and then the back button works as expected.

If you do that though, there are a few other issues - you may have to account for pages that do/don't have the Facebook signed_request post data - i.e. you probably need to store it in a session or cookie (and deal with the relevant IE7 cookie + iFrame issues by settings P3P header if you support IE7. Can't remember offhand if it is a problem in IE8.)

Obviously more complex apps where navigation is handled through AJAX get tricky when you can't access the container frame. Maybe look into history.js (https://github.com/balupton/History.js/) and see if it works in a Facebook app?

History.js looks promising. I'll definitely dig deeper. Using regular A tags does not work, however, hence my question.

I decided not to support IE7 since this is a brand new app. It will be IE8+. I had to deal with the P3P issue in the past and it was a pain. Hopefully IE8 isn't as picky.

Thanks for the help! I now have something to investigate.

If some other people have also problems with IE, facebook and session cookies, have a look at this reciep, i wrote. The solution is pretty easy. http://recipes.wearekiss.com/view/platform/problem-solutions...
I had trouble doing just this, mainly because of how IE handles cookies on 304. I used this Gem for a Rails app (~1 year ago): https://rubygems.org/gems/rack-p3p.
You could do something hacky with pushState [0], but it would take a considerable amount of work to make it work. I can't even think of a way to implement it, but you could try something out.

Your other option is to have a back button in your iframe in a prominent location and hope your user uses that instead of the browser back button.

If you somehow figure out a way to make pushState work, you should probably still have a back button in your app, for old browsers. Or at least display it for only old browsers.

[0] -https://developer.mozilla.org/en/DOM/Manipulating_the_browse...

I think pushState might be the solution indeed. I was hoping for something a bit simpler. Thanks for the help! For the record, this screencast helped me: http://railscasts.com/episodes/246-ajax-history-state
Thanks for the link! I wanted to learn about pushState so that might help me out.
Facebook actually passes the path from the canvas url to your iframe. So what I do is make all the targets "_top" and point to my canvas url. No need for complicated JS stuff. :D

So a link in my iframe app would be something like this: <a href="https://apps.facebook.com/defensio/archives/index target="_top">Deleted</a>

This will create an iframe with https://facebook.defensio.net/archives/index

Thanks Jason. That's actually my fallback idea, but isn't that very slow for the user since it reloads the Facebook container every time?