Grabbing data from an i-frame embedded Facebook application

Question

Using an iFrame, someone on my website can access their Facebook account, display a list of their photo albums, and then display photos from selected albums.

At the moment, when the user clicks a photo, I display a dialog box that shows the photo's path.

All of the above works perfectly.

My next step is to pass the photo's path info back to my web page, but I'm not sure how to do that because the object, to which I want to pass the data, is outside of the iFrame and therefore unknown to Facebook. I tried going top-down by referencing it through the DOM that contains the iFrame on my website...

parent.client.document.getElementById("FBPhoto").setValue(photoReference);

...but that didn't work.

Passing the argument to a PHP script, on my site, won't work because I don't want to fresh the page on my site (since that would cause the user to lose data).

Any ideas would be greatly appreciated.

Thanks.

Answer 1

From what you've provided it looks like your JS might be wrong.

Doing something like this might get you the value you need:

var photoReference = window.frames["iframe-name"].document.getElementById("FBPhoto");

Then you need to assign it to something:

MyObject.setValue(photoReference);

Note: window.frames["iframe-name"].document.getElementById("FBPhoto") will return the DOM element called #FBPhoto and will therefore be a big chunk of HTML. Your setValue() method might not be expecting that.

I suggest you try running your script in Firefox with Firebug installed, which will allow you to dump the value of photoReference to the console to see what you're getting back.

Answer 2

Doy... I realized that since the Facebook connection was running in a dedicated iFrame, it wouldn't be a problem to re-direct that frame because there was no reason to leave it open anyhow.

For anyone interested, here's what I did...

1. The PHP (inside of index.php) displays the album photos.

2. The PHP also surrounds each img frame with href tags.

3. The link points to a PHP file (on my website) and includes an argument with the location of the large version of the photo (since my app is displaying thumbnails). Something like: "< a href="pathToMySite/get-photo.php?photopath=facebook's path ">

4. When the user clicks on the desired photo, its respective link calls get-photo.php (on my site) and passes the path for the photo.

5. get-photo.php then inserts a reference to my website's main JS file into the document head, and inserts a script into the body of the HTML document.

6. The script calls a JS fetch-photo function, and passes the path argument that it received from the embedded iFrame that was running the Facebook app.

7. The JS function closes the iFrame (since I'm done with Facebook at that point) and grabs the photo from Facebook.