如何使用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父级的值？

回答

相关问题