Wie man erkennt, wann die FB.init von Facebook abgeschlossen ist

Question

Das alte JS SDK hatte eine Funktion namens FB.ensureInit. Das neue SDK scheint keine solche Funktion zu haben... wie kann ich sicherstellen, dass ich keine API-Aufrufe tätige, bis sie vollständig initiiert ist?

Ich füge dies oben auf jeder Seite ein:

<div id="fb-root"></div>
<script>
  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);
  }());
</script>

Answer 1

Ich habe die Verwendung von setTimeout vermieden, indem ich eine globale Funktion verwendet habe:

HINWEIS ZUR BEARBEITUNG: Ich habe die folgenden Hilfsskripte aktualisiert und eine Klasse erstellt, die einfacher zu verwenden ist; sehen Sie sich das hier an ::: https://github.com/tjmehta/fbExec.js

window.fbAsyncInit = function() {
    FB.init({
        //...
    });
    window.fbApiInit = true; //init flag
    if(window.thisFunctionIsCalledAfterFbInit)
        window.thisFunctionIsCalledAfterFbInit();
};

fbEnsureInit wird seinen Callback nach FB.init aufrufen

function fbEnsureInit(callback){
  if(!window.fbApiInit) {
    window.thisFunctionIsCalledAfterFbInit = callback; //find this in index.html
  }
  else{
    callback();
  }
}

fbEnsureInitAndLoginStatus wird seinen Callback nach FB.init und nach FB.getLoginStatus aufrufen

function fbEnsureInitAndLoginStatus(callback){
  runAfterFbInit(function(){
    FB.getLoginStatus(function(response){
      if (response.status === 'connected') {
        // the user is logged in and has authenticated your
        // app, and response.authResponse supplies
        // the user's ID, a valid access token, a signed
        // request, and the time the access token
        // and signed request each expire
        callback();

      } else if (response.status === 'not_authorized') {
        // the user is logged in to Facebook,
        // but has not authenticated your app

      } else {
        // the user isn't logged in to Facebook.

      }
    });
  });
}

Beispiel für die Verwendung von fbEnsureInit:

(FB.login muss ausgeführt werden, nachdem FB initialisiert wurde)

fbEnsureInit(function(){
    FB.login(
       //..enter code here
    );
});

fbEnsureInitAndLogin Beispielverwendung:

(FB.api muss nach FB.init ausgeführt werden und der FB-Benutzer muss eingeloggt sein).

fbEnsureInitAndLoginStatus(function(){
    FB.api(
       //..enter code here
    );
});

Answer 2

Anstatt setTimeout oder setInterval zu verwenden, würde ich mich an Deferred Objects halten (Implementierung durch jQuery aquí ). Es ist immer noch schwierig, Warteschlange im richtigen Moment zu lösen, weil init keine Rückrufe haben, aber die Kombination von Ergebnis mit Ereignis-Abonnement (wie jemand vor mir gezeigt), sollte den Trick tun und nahe genug sein.

Das Pseudo-Snippet würde wie folgt aussehen:

FB.Event.subscribe('auth.statusChange', function(response) {
   if (response.authResponse) {
       // user has auth'd your app and is logged into Facebook
   } else {
       // user has not auth'd your app, or is not logged into Facebook
   }
   DeferredObject.resolve();
});

Answer 3

Hier ist eine einfachere Methode, die weder Ereignisse noch Zeitüberschreitungen erfordert. Es erfordert jedoch jQuery.

Utilice jQuery.holdReady() (docs)

Verzögern Sie also unmittelbar nach Ihrem jQuery-Skript das Ready-Ereignis.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $.holdReady( true ); // don't fire ready until told (ie when FB loaded)
</script>

Geben Sie sie dann in Ihrer Facebook-Init-Funktion frei:

window.fbAsyncInit = function() {
    FB.init({
        appId: '11111111111111',
        cookie: true,
        xfbml: false,
        version: 'v2.4'
    });

    // release the ready event to execute
    $.holdReady( false );
};

Dann können Sie das Ereignis "Bereit" wie gewohnt verwenden:

$(document).ready( myApp.init );

Answer 4

Sie können sich für die Veranstaltung anmelden:

dh)

FB.Event.subscribe('auth.login', function(response) {
  FB.api('/me', function(response) {
    alert(response.name);
  });
});

Answer 5

Kleine, aber WICHTIGE Hinweise:

1. FB.getLoginStatus muss aufgerufen werden nach FB.init , sonst wird das Ereignis nicht ausgelöst.

2. können Sie FB.Event.subscribe('auth.statusChange', callback) aber sie wird nicht ausgelöst, wenn der Benutzer nicht bei Facebook angemeldet ist.

Hier ist das Arbeitsbeispiel mit beiden Funktionen

window.fbAsyncInit = function() {
    FB.Event.subscribe('auth.statusChange', function(response) {
        console.log( "FB.Event.subscribe auth.statusChange" );
        console.log( response );
    });

    FB.init({
        appId   : "YOUR APP KEY HERE",
        cookie  : true,  // enable cookies to allow the server to access
                // the session
        xfbml   : true,  // parse social plugins on this page
        version : 'v2.1', // use version 2.1
        status  : true
    });

    FB.getLoginStatus(function(response){
        console.log( "FB.getLoginStatus" );
        console.log( response );
    });

};

// Load the SDK asynchronously
(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));