jquery - 如何使用 jQuery 存储和访问 iFrame 父级上的值？

Question

我有一个由一个父页面组成的网站。使用 lightbox 样式的 jQuery 插件 colorbox，我在 iFrame 中打开其他页面，这些页面 float 在父页面顶部(覆盖样式)。

在 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 文档就绪标记中。

提前致谢!

/托马斯·卡恩

Answer 1

我已经解决了这个问题。它的真正来源不是访问变量，而是我在 javascript 中访问变量的方式和时间的错误。当我在父页面中声明 jQuery 外部的变量时，如下所示:

   var friendsCache = new Object;

...成功了!在我的 IFrame 页面中，我可以访问如下值:

   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 好友列表。相反，我从缓存变量加载它们，这使我的性能得到了非常显着的提高。

尽管这个描述的范围比我原来的问题要宽一些，但我希望有人会发现它有用。

/托马斯·卡恩