2

私は Facebook アプリを作成しています。iFrame DOM の準備ができたとき、および iFrame が完全に読み込まれたときを検出する方法を見つけようとしています。window.fbAsyncInit() FB API がロードされたときに起動するため、これで十分だとは思いません。jQuery(document).ready()具体的にはandに相当するものを探して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

ドキュメント対応関数で通常の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

私が理解しているように、あなたのコードを実行する前に2つのことが必要です。これらは：

  1. ページを準備する必要があります。
  2. Facebook API JS がダウンロードされ、初期化されます。

残念ながら、Facebook API が完全に初期化されているかどうかを簡単に検出する方法を見つけることができませんでした。(FB.init非同期であるため、以下の行が init done のように機能するとは想定できません。)

私の実験として、コールバックを持ち、非同期が完了FB.initするまで待機した後に呼び出されるFacebook関数。(場合によっては発火しないのでご注意ください。)FB.initauth.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 をダミー アプリのドメインに追加しましたが、機能しない場合は、コンソールを確認して通知してください。)

これらに加えて、Ian がコメントアウトしたように、Facebook が読み込まれているかどうかを理解するための「API 以外の方法」はありません。

于 2013-05-15T11:58:40.683 に答える
1

iFrame DOM の準備ができたときと、iFrame が完全に読み込まれたときを検出する方法を見つけようとしています。window.fbAsyncInit() は、FB API がロードされたときに起動するため、十分ではないと思います。

SDK を非同期的にロードする script 要素を body 要素の最後に配置すると、fbAsyncInit イベントが発生したときに DOM の準備が整っているはずです。

それだけでは不十分だと思われる場合は、単純なカウンターをインクリメントすることにより、2 つのイベントが発生した場合にのみ何かを実行する簡単で一般的な方法があります。

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 に答える
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 に答える