如何使用jQuery存儲和訪問iFrame父級的值？

我有一個由一個父頁面組成的網站。使用lightbox風格的jQuery插件colorbox，我打開了浮動在父頁頂部的疊加樣式的iFrame中的其他頁面。如何使用jQuery存儲和訪問iFrame父級的值？

在iFrame頁面上的JavaScript代碼中，我加載了來自Facebook的JSON數據。由於從Facebook加載數據需要時間，我想將我加載的數據存儲在父頁面上的變量中。

然後每次我打開覆蓋中的新iFrame，我想能夠檢查父頁面變量是否爲空。如果它是空的，我從Facebook加載數據。如果它不是空的，我從父頁面上的變量中獲取數據。

我想這樣做的唯一原因是提高性能並避免不必要的Facebook API調用。

如何創建一個解決方案，其中的iFrame中的JavaScript可以存儲和訪問來自其父頁上的變量的數據？

我沒有真正的代碼，但在僞代碼，我想是這樣的：

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

到Facebook的API調用看起來是這樣的：

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

在父頁面我的JavaScript代碼是在jQuery文檔就緒標記中。

在此先感謝！

/Thomas Kahn

來源

2010-11-18 tkahn

父母和孩子「IFrames」是否住在同一個域中？ – msuhash 2010-11-18 13:40:36

你不能使用wondow.parent。？ – msuhash 2010-11-18 13:42:53

是的，父級和Iframe都從同一個域上的相同Web服務器加載。我已經使用window.parent.variable完成了實驗，但它不像我期望的那樣工作。我的代碼是否包含在jQuery中的事實是否是原因？ – tkahn 2010-11-18 13:53:03

我已經解決了這個問題。它的真正來源不是訪問變量，而是在我訪問javascript中的變量時的錯誤。當我在父頁面中聲明jQuery之外的變量時，像這樣：

var friendsCache = new Object;

...它的工作！在我的IFrame的頁面，我可以這樣訪問值：

var friends = window.parent.friendsCache;

所以現在我有一個解決方案，看起來是這樣的。當用戶登錄成功與Facebook連接，我調用該函數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 
}

只要父頁面不重新加載，我不需要從圖形加載的Facebook好友列表API。相反，我從我的緩存變量中加載它們，這給了我非常顯着的性能提升。

雖然這個描述的範圍比我原來的問題稍寬一些，但我希望有人會覺得它有用。

/Thomas Kahn

來源

2010-11-22 10:57:45 tkahn

如何使用jQuery存儲和訪問iFrame父級的值？

回答

相關問題