Question

我有一个由一个父页面组成的网站。使用灯箱式jQuery插件颜色框我在iFrames中打开其他页面，这些页面浮动在父页面的顶部，覆盖样式。

在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

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

虽然这个描述的范围比我原来的问题要广泛得多，但我希望有人会觉得它很有用。

/ Thomas Kahn

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

1 个答案: