Wie kann ich einen Wert auf einem Elternteil eines iFrames mit jQuery speichern und darauf zugreifen?

Question

Ich habe eine Website, die aus einer übergeordneten Seite besteht. Mit der jQuery-Plugin-Farbbox im Lightbox-Stil öffne ich andere Seiten in iFrames, die auf der übergeordneten Seite im Overlay-Stil schweben.

Im JavaScript-Code auf den iFrame-Seiten lade ich JSON-Daten von Facebook. Da das Laden der Daten von Facebook Zeit kostet, möchte ich die Daten, die ich geladen habe, in einer Variablen speichern, die auf der übergeordneten Seite liegt.

Jedes Mal, wenn ich einen neuen iFrame in einem Overlay öffne, möchte ich prüfen können, ob die Variable der übergeordneten Seite leer ist oder nicht. Wenn es leer ist, lade ich die Daten von Facebook. Wenn es nicht leer ist, erhalte ich die Daten von der Variablen auf der Elternseite.

Der einzige Grund, warum ich dies tun möchte, ist die Leistung zu erhöhen und unnötige Aufrufe an die Facebook-API zu vermeiden.

Wie erstelle ich eine Lösung, in der ein JavaScript in einem iFrame Daten von einer Variablen speichern und auf sie zugreifen kann, die auf ihrer übergeordneten Seite lebt?

ich nicht echten Code haben, aber in Pseudo-Code würde ich so etwas wie dies mag:

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

Der Aufruf der Facebook-API wie folgt aussieht:

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 die übergeordnete Seite mein JavaScript-Code ist in einem jQuery-Dokument bereit Tag.

Vielen Dank im Voraus!

/Thomas Kahn

Answer 1

Ich habe das Problem gelöst. Die eigentliche Quelle war nicht der Zugriff auf die Variable, sondern ein Fehler in der Art und Weise, wie ich auf die Variablen in meinem Javascript zugegriffen habe. Wenn ich die Variablen außerhalb von jQuery auf der übergeordnete Seite deklarierte, wie folgt:

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

var friends = window.parent.friendsCache; 

So jetzt habe ich eine Lösung, die in etwa so 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, muss ich nicht die Liste der Facebook-Freunde aus dem Diagramm laden API. Stattdessen lade ich sie von meiner Cache-Variable, was mir eine merkliche Leistungssteigerung bringt.

Obwohl diese Beschreibung ein wenig breiter als meine ursprüngliche Frage war, hoffe ich, dass jemand sie nützlich finden wird.

/Thomas Kahn