Wie kann ich speichern und den Zugriff Wert auf Eltern iFrame mit jQuery?

Question

ich eine Website, die von einer übergeordneten Seite besteht. Mit Hilfe des Leuchtkasten-Stil jQuery-Plugin colorbox Ich öffne andere Seiten in iFrames, dass Schwimmer oben auf der übergeordneten Seite Overlay-Stil.

In dem JavaScript-Code auf den iFrame-Seiten laden I JSON-Daten von Facebook. Da das Laden von Daten aus Facebook braucht Zeit, ich die Daten speichern, möchte ich in einer Variablen geladen haben, die auf der übergeordneten Seite lebt.

Dann wird jedes Mal, wenn ich in einem Overlay eine neue iFrame öffnen, mag ich in der Lage sein zu überprüfen, ob die übergeordnete Seite Variable leer ist oder nicht. Wenn es leer ist, lade ich die Daten von Facebook. Wenn es nicht leer ist, ich die Daten aus den Variablen auf der übergeordneten Seite bekommen.

Der einzige Grund, warum ich dies tun will, wird die Leistung zu erhöhen und unnötige Anrufe auf den Facebook-API zu vermeiden.

Wie erstelle ich eine Lösung, bei der ein Javascript in einem iFrame speichern kann und Zugriff auf Daten aus einer Variablen, dass Leben auf der übergeordneten Seite?

Ich habe keine echten Code haben, aber in Pseudo-Code möchte ich etwas wie folgt aus:

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

Der Aufruf an die Facebook-API sieht wie folgt aus:

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
});

Auf der übergeordneten Seite meines Javascript-Code ist in einem jQuery-Dokument bereit Tag.

Vielen Dank im Voraus!

/ Thomas Kahn

Answer 1

Ich habe das Problem gelöst. Die wirkliche Quelle wurde nicht Zugriff auf die Variable, sondern ein Fehler in, wie und wann ich die Variablen in meinem Javascript zugegriffen. Wenn ich die Variablen außerhalb von jQuery in der übergeordneten Seite erklärt, wie folgt aus:

   var friendsCache = new Object;

... es hat funktioniert! In meiner IFrame Seite kann ich den Wert wie folgt zugreifen:

   var friends = window.parent.friendsCache;

So, jetzt habe ich eine Lösung, die etwa wie folgt aussieht. Wenn der Benutzer erfolgreich mit Facebook Connect angemeldet hat, nenne ich die Funktion 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
}

Solange die übergeordnete Seite nicht neu geladen wird, ich brauche nicht die Liste der Facebook-Freunde aus dem Graph API zu laden. Stattdessen lade ich sie von meinem Cache Variable, die mir eine sehr deutliche Zunahme der Leistung.

Eventhough diese Beschreibung war etwas breiter gefasst als meine ursprüngliche Frage, ich hoffe jemand es nützlich finden werden.

/ Thomas Kahn