How do I store and access a value on an iFrame's parent using jQuery?

Question

I have a website that consists of one parent page. Using the lightbox-style jQuery plugin colorbox I open other pages in iFrames that float on top of the parent page, overlay style.

In the javascript code on the iFrame pages I load JSON data from Facebook. Since the data loading from facebook takes time I want to store the data I've loaded in a variable that lives on the parent page.

Then each time I open a new iFrame in an overlay, I want to be able to check if the parent page variable is empty or not. If it's empty, I load the data from Facebook. If it's not empty, I get the data from the variable on the parent page.

The only reason I want to do this is increasing performance and avoiding unnecessary calls to the Facebook API.

How do I create a solution where a javascript in an iFrame can store and access data from a variable that lives on its parent page?

I don't have real code, but in pseudo code I'd like something like this:

function loadFacebookFriends() {
   if(parentFriendsVariable is empty) {
      Load friends from Facebook
   }
   else {
      localFriendsVariable = parentFriendsVariable
   }
}

The call to the Facebook API looks like this:

FB.api("/me/friends?fields=name,first_name,picture", function(friendsData) {
    // When this callback is executed, the data I want is
    // now in the object:
    friendsData.data
});

On the parent page my javascript code is in a jQuery document ready tag.

Thanks in advance!

/Thomas Kahn

Answer 1

I have solved the problem. The real source of it was not accessing the variable, but an error in how and when I accessed the variables in my javascript. When I declared the variables outside of jQuery in the parent page, like this:

   var friendsCache = new Object;

...it worked! In my IFrame page I can access the value like this:

   var friends = window.parent.friendsCache;

So now I have a solution that looks something like this. When the user has logged in successfully with Facebook Connect, I call the function loadFriends:

function loadFriends() {
   if (jQuery.isEmptyObject(friends)) {
      FB.api("/me/friends?fields=name,first_name,picture", renderFriends);
   }
   else {
      renderFriends();
   }
}

function renderFriends(friendsData) {
   if (friendsData != undefined) {
      if (!(jQuery.isEmptyObject(friendsData))) {
         friends = friendsData.data;
         window.parent.friendsCache = friends;
      }
   }
   // Do the stuff you want to do when the friends are loaded
}

As long as the parent page isn't reloaded, I don't need to load the list of Facebook friends from the Graph API. Instead I load them from my cache variable, which gives me a highly noticeable increase in performance.

Eventhough this description was a little broader in scope than my original question, I hope someone will find it useful.

/Thomas Kahn