Wie kann man erkennen, wann die Facebook-Javascript-Funktion bereit ist?

Question

Ich habe dies verwendet:

function FB_wait() {
    if (typeof FB == 'undefined') {
        window.setTimeout(FB_wait, 100);
    } else {
        more();
    }
}

Aber es muss einen besseren Weg geben

 window.fbAsyncInit = function() {
    FB.init({
      appId  : '<?php echo $conf['fb']['appid']; ?>',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });
    FB.Canvas.setAutoResize();
  };

  (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());

Dies ist mein Init-Code..

Answer 1

Nach Angaben der FaceBook JavaScript SDK Dokumentation müssen Sie nur Folgendes erstellen fbAsyncInit() Funktion. Sie wird ausgeführt, sobald FB bereit sein wird:

var fbAsyncInit = function() {
    // FB is ready
};

Answer 2

Ich habe eine window.fbReady()-Funktion erstellt, die sich ähnlich wie die ready-Funktion von jQuery verhält, d.h. sie führt die Funktion aus, die Sie ihr geben, wenn das FB-Objekt geladen ist, oder fügt sie in eine Warteschlange ein, wenn dies nicht der Fall ist.

;(function(){
  // Function to have a list of functions to load on fbAsyncInit
  var toLoad = []
  window.fbReady = function(func){
    if( typeof func === 'function') {
      if( window.FB ) {
        func.call(window)
      } else {
        toLoad.push(func)
      }
    }
  }

  window.fbAsyncInit = function() {
    FB.init({
      appId: FACEBOOK_API_KEY,
      status: true,
      cookie: true,
      xfbml: true
    })

    // Execute all the fbAsyncInit functions
    toLoad.forEach(function(func){
      func.call(window)
    })
  };
})();
(function(d, debug){
  var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
  ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));

Answer 3

Sie sollten eine beliebige FB-Funktion in window.fbAsyncInit einfügen, aber NICHT in FB.init(), da diese als Parameter nur ein Array von Optionen empfängt. Ihr Code sollte wie folgt aussehen:

window.fbAsyncInit = function() {
    FB.init({
      appId  : '<?php echo $conf['fb']['appid']; ?>',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });

    // at this level, the FB library is ready
    FB.Canvas.setAutoResize();
    FB.getLoginStatus(function(resp){ console.log(resp) });
    FB.any_fb_function();

   (function() {
      var e = document.createElement('script');
      e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
      e.async = true;
      document.getElementById('fb-root').appendChild(e);
   }());
};