如何在iFrame'；谁的父级使用jQuery？

我有一个网站，其中包括一个家长的网页。使用lightbox风格的jQuery插件colorbox，我在iFrame中打开其他页面，这些页面浮动在父页面overlay风格的顶部

在iFrame页面上的javascript代码中，我从Facebook加载JSON数据。由于从facebook加载数据需要时间，我想将加载的数据存储在父页面上的变量中

然后，每次在覆盖中打开新的iFrame时，我都希望能够检查父页面变量是否为空。如果是空的，我从Facebook加载数据。如果不是空的，则从父页面上的变量获取数据

我想这样做的唯一原因是提高性能，避免不必要的Facebook API调用

如何创建一个解决方案，使iFrame中的javascript可以存储和访问位于其父页面上的变量的数据？

我没有真正的代码，但在伪代码中，我希望如下所示：

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

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

   var friendsCache = new Object;

   var friends = window.parent.friendsCache;

对Facebook API的调用如下所示：

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

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

   var friendsCache = new Object;

   var friends = window.parent.friendsCache;

在父页面上，我的javascript代码位于jQuery文档就绪标记中

提前谢谢

---

/托马斯·卡恩我已经解决了这个问题。它的真正来源不是访问变量，而是在javascript中访问变量的方式和时间上的错误。当我在父页面中声明jQuery之外的变量时，如下所示：

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

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

   var friendsCache = new Object;

   var friends = window.parent.friendsCache;

…成功了！在我的IFrame页面中，我可以访问如下值：

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

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

   var friendsCache = new Object;

   var friends = window.parent.friendsCache;

现在我有了一个类似这样的解决方案。当用户使用Facebook Connect成功登录时，我调用函数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
}

只要不重新加载父页面，我就不需要从Graph API加载Facebook好友列表。相反，我从缓存变量中加载它们，这使我的性能得到了非常显著的提高

尽管这个描述的范围比我最初的问题要广一些，但我希望有人会觉得它有用

---

/Thomas Kahn

父代和子代“iFrame”是否生活在同一个域中？您不能使用wondow.parent吗？是的，父代和iFrame都是从同一域上的同一web服务器加载的。我已经使用window.parent.variable做了一些实验，但它并不像我预期的那样工作。我的代码被包装在jQuery中这一事实可能是原因吗？在我看来，您希望在父框架中访问的变量没有在全局范围中公开。正如msuhash所说，如果帧在同一个域中，则可以使用“parent.foo”访问名为foo的父全局变量。但是，如果您的变量是在jQuery doc ready事件中定义的（例如$（“document”）.ready（function（）{var foo=23；}）；那么该变量只能在该函数内访问。我尝试在jQuery范围外声明该变量，但也不起作用。可能是因为我在IFrame页面上的jQuery范围内尝试访问它？