2

我正在编写一个 Facebook 应用程序，并且试图找出如何检测 iFrame DOM 何时准备好以及 iFrame 何时完全加载。我认为这window.fbAsyncInit() 还不够，因为它会在 FB API 加载时触发。我特意寻找 and 的等价物jQuery(document).ready()，jQuery(window).load()但它必须在我的页面所在的 Facebook iFrame 中工作。

编辑：大多数回复似乎都已准备好参考文档，但甚至没有人提到窗口加载。我有兴趣了解两者，而不仅仅是其中一个。在我的情况下，等效的窗口负载实际上更重要，因为我在页面上有一些大型图形必须完全加载才能对其进行操作。

编辑 2：经过进一步调查，答案可能是简单地包裹jQuery(document).ready()或window.fbAsyncInit()使用jQuery(window).load(). 我最初的测试表明这些方法没有按预期工作。我正在处理的页面有一些沉重的 JS，事实证明页面上有许多异步加载导致我的测试无效。jQuery(document).ready()包裹在 中window.fbAsyncInit()，并且jQuery(window).load()似乎是正确的方法。

4

5 回答 5

1

I'm trying to find out how to detect when the iFrame DOM is ready, and when the iFrame has completely loaded. I do not believe that window.fbAsyncInit() is sufficient, because that fires when the FB API has loaded.

If you put the script element that loads the SDK asynchronously at the very end of your body element, then DOM should be ready - ready enough - when the fbAsyncInit event fires.

If you think that's not enough, there is an easy more general way to do something only when two events have fired - by incrementing a simple counter:

var howManyOfUsHaveFired = 0;

function doMyShit() {
  if(howManyOfUsHaveFired < 2) {
    return; // i don't want to do shit already
  }
  // now I will do shit
}

$(function() {
  ++howManyOfUsHaveFired;
  doMyShit();
});

window.fbAsyncInit = function() {
  FB.init(...);
  ++howManyOfUsHaveFired;
  doMyShit();
}
于 2013-05-15T12:22:36.020 回答
1

您可以在文档就绪功能上使用普通的 jQuery，没有什么可以阻止您使用它，它会像往常一样工作。您可能遇到的唯一问题是您的代码是否依赖于正在加载的 facebook js sdk，因为您使用的是异步方法，因此无法保证它在页面加载时可用。

因此，我实际上建议不要使用异步方法（尤其是在画布应用程序中），否则您基本上需要将所有依赖于 facebook sdk 的应用程序代码放在“fbAsyncInit”函数中。

<body>
    <div id="fb-root"></div>
    <script src="//connect.facebook.net/en_US/all.js"></script>
    <script type="text/javascript">
        jQuery(function(){
            // ... your 'on document ready' code
        });
        FB.init({
            appId                   : 'XXXXXX',
            status                  : true,
            cookie                  : true,
            xfbml                   : true,
            oauth                   : true,
            frictionlessRequests    : true
        });
        FB.Canvas.setAutoGrow();
        jQuery(function(){
            // ... more 'on document ready' code
        });
    </script>
于 2013-05-15T09:05:55.870 回答
1

据我了解，在运行您的一些代码之前，您需要做两件事。这些是：

  1. 您的页面需要准备好。
  2. Facebook API JS 已下载并初始化。

不幸的是，我无法找到一种简单的方法来检测 Facebook API 是否已完全初始化。（由于FB.init是异步的，你不能假设下面的行就像初始化一样工作。）

作为我的实验 Facebook 函数，它具有回调并在FB.init等待异步FB.init完成后被调用。（请注意，auth.statusChange在某些情况下不会触发。）

那么这样的事情对你有用吗？您可以根据需要使用allready事件window。

<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">

window.fbAsyncInit = function() {
    FB.init({appId: "238797476172233"});

    FB.getLoginStatus(function(response) {
        /* at this point you know that you can use FB API's. */
        $().ready(function() {
          /* at this point you also know that your document is ready. */
          $(window).trigger("allready", [response]);
        });
    });
    FB.Canvas.setAutoGrow();
};

$(window).bind("allready", function() {
   /* optionally you can use e and response as function parameters */   
   alert("now I am sure that both page and FB API's are initialized. I can do anything in this callback!");   
});
</script>

JSFiddle： http: //jsfiddle.net/ubenzer/5y6fF/ （我将 JSFiddle URL 添加到我的虚拟应用程序的域中，但如果它不起作用，请检查控制台并通知我。）

除了这些，您没有任何“非 api 方式”来了解 Facebook 是否像 Ian 评论的那样被加载。

于 2013-05-15T11:58:40.683 回答
0

你可以试试小的 jquery lib - https://github.com/ntotten/jquery-fb 

$(document).ready(function() {

   // Add the function to run after FB is initialized
   $(document).on('fb:initialized', function() {
     FB.getLoginStatus(fbAuthStatusChange);
   });
   $(document).fb('youappid');

});
于 2013-05-15T21:39:16.623 回答
0

这看起来像解决方案： https ://developers.facebook.com/docs/reference/javascript/FB.Canvas.setDoneLoading/

经过一些测试，我确实相信这可以满足需要：

<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function() {
    FB.init({
         appId: 'xxxxxxxxxxxxxxx', 
         status: true, 
         cookie: true, 
         xfbml: true
    });

    FB.Canvas.setDoneLoading( function() {
        // Put code here that you want executed after page is done loading.
        console.log("done");
    });
}
</script>
于 2013-05-12T04:33:27.460 回答