Как определить, когда FB.init в facebook завершен - PullRequest
Новая
       11

Как определить, когда FB.init в facebook завершен

113 голосов
/ 23 августа 2010

В старом JS SDK была функция FB.ensureInit. Новый SDK, похоже, не имеет такой функции ... как я могу гарантировать, что я не делаю вызовы API, пока он не будет полностью инициирован?

Я включаю это в начало каждой страницы: 

<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>

Ответы [ 12 ]

138 голосов
/ 23 августа 2010

Обновление от 4 января 2012 г.

Похоже, вы не можете просто вызывать FB-зависимые методы (например, FB.getAuthResponse()) сразу после FB.init(), как раньше, какFB.init() теперь кажется асинхронным.Заключение кода в ответ FB.getLoginStatus(), похоже, помогает обнаружить, когда API полностью готов: 

window.fbAsyncInit = function() {
    FB.init({
        //...
    });

    FB.getLoginStatus(function(response){
        runFbInitCriticalCode(); 
    });

};

или при использовании реализации fbEnsureInit() снизу: 

window.fbAsyncInit = function() {
    FB.init({
        //...
    });

    FB.getLoginStatus(function(response){
        fbApiInit = true;
    });

};

Исходное сообщение:

Если вы хотите просто запустить какой-нибудь скрипт при инициализации FB, вы можете поместить некоторую функцию обратного вызова в fbAsyncInit: 

  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();

    runFbInitCriticalCode(); //function that contains FB init critical code
  };

ЕслиВы хотите точную замену FB.ensureInit, тогда вам придется написать что-то самостоятельно, так как официальной замены нет (большая ошибка imo).Вот что я использую: 

  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();

    fbApiInit = true; //init flag
  };

  function fbEnsureInit(callback) {
        if(!window.fbApiInit) {
            setTimeout(function() {fbEnsureInit(callback);}, 50);
        } else {
            if(callback) {
                callback();
            }
        }
    }

Использование: 

fbEnsureInit(function() {
    console.log("this will be run once FB is initialized");
});
35 голосов
/ 30 июня 2012

На самом деле Facebook уже предоставил механизм подписки на события аутентификации.

В вашем случае вы используете " status: true ", что означает, что объект FB будет запрашивать у Facebook статус пользователя. 

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.getLoginStatus ()», вы выполняете тот же запрос снова .

Вместо этого вы можете использовать FB.Event.subscribe , чтобы подписаться на auth.statusChange или auth.authResponseChange событие ДО , который вы вызываете FB.init 

FB.Event.subscribe('auth.statusChange', function(response) {
    if(response.status == 'connected') {
        runFbInitCriticalCode();
    }
});

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
});

Скорее всего, при использовании « status: false » вы можете запустить любой код сразу после FB.init, потому что асинхронных вызовов не будет.

12 голосов
/ 23 июля 2012

Вот решение, если вы используете и асинхронную ленивую загрузку Facebook: 

// listen to an Event
$(document).bind('fbInit',function(){
    console.log('fbInit complete; FB Object is Available');
});

// FB Async
window.fbAsyncInit = function() {
    FB.init({appId: 'app_id', 
         status: true, 
         cookie: true,
         oauth:true,
         xfbml: true});

    $(document).trigger('fbInit'); // trigger event
};
10 голосов
/ 08 июля 2013

Другой способ проверить, инициализирован ли FB, - использовать следующий код: 

ns.FBInitialized = function () {
    return typeof (FB) != 'undefined' && window.fbAsyncInit.hasRun;
};

Таким образом, в событии готовности вашей страницы вы можете проверить ns.FBInitialized и отложить событие на более позднюю фазу, используя setTimeOut.

5 голосов
/ 16 июня 2014

Хотя некоторые из вышеуказанных решений работают, я подумал, что опубликую наше возможное решение, которое определяет «готовый» метод, который сработает, как только FB будет инициализирован и готов к работе. У него есть преимущество перед другими решениями, которое безопасно вызывать до или после того, как FB будет готов.

Может использоваться так: 

f52.fb.ready(function() {
    // safe to use FB here
});

Вот исходный файл (обратите внимание, что он определен в пространстве имен 'f52.fb'). 

if (typeof(f52) === 'undefined') { f52 = {}; }
f52.fb = (function () {

    var fbAppId = f52.inputs.base.fbAppId,
        fbApiInit = false;

    var awaitingReady = [];

    var notifyQ = function() {
        var i = 0,
            l = awaitingReady.length;
        for(i = 0; i < l; i++) {
            awaitingReady[i]();
        }
    };

    var ready = function(cb) {
        if (fbApiInit) {
            cb();
        } else {
            awaitingReady.push(cb);
        }
    };

    window.fbAsyncInit = function() {
        FB.init({
            appId: fbAppId,
            xfbml: true,
            version: 'v2.0'
        });

        FB.getLoginStatus(function(response){
            fbApiInit = true;
            notifyQ();
        });
    };

    return {
        /**
         * Fires callback when FB is initialized and ready for api calls.
         */
        'ready': ready
    };

})();
4 голосов
/ 09 сентября 2015

Вот более простой метод, который не требует ни событий, ни тайм-аутов.Однако для этого требуется jQuery.

Использование jQuery.holdReady() (документы)

Итак, сразу после сценария jQuery задержите событие готовности. 

<!-- 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>

Затем в функции инициализации Facebook отпустите ее: 

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

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

Затем вы можете использовать событие готовности как обычно: 

$(document).ready( myApp.init );
4 голосов
/ 17 июля 2012

Вместо использования любого setTimeout или setInterval я бы придерживался отложенных объектов (реализация jQuery здесь ). По-прежнему сложно разрешить очередь в нужный момент, потому что init не имеет обратных вызовов, но объединяет результат с подпиской на события (как кто-то указывал до меня), должен сделать свое дело и быть достаточно близко.

Псевдо-фрагмент будет выглядеть следующим образом: 

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();
});
4 голосов
/ 22 февраля 2012

Я избегал использования setTimeout, используя глобальную функцию:

РЕДАКТИРОВАТЬ ПРИМЕЧАНИЕ. Я обновил следующие вспомогательные сценарии и создал класс, который проще / проще в использовании; проверить это здесь ::: https://github.com/tjmehta/fbExec.js

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

fbEnsureInit будет вызывать обратный вызов после FB.init 

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

fbEnsureInitAndLoginStatus будет вызывать обратный вызов после FB.init и после FB.getLoginStatus 

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.

      }
    });
  });
}

Пример использования fbEnsureInit:

(FB.login необходимо запустить после инициализации FB) 

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

Пример использования fbEnsureInitAndLogin:

(FB.api необходимо запустить после того, как FB.init и пользователь FB должны войти в систему.) 

fbEnsureInitAndLoginStatus(function(){
    FB.api(
       //..enter code here
    );
});
2 голосов
/ 14 сентября 2016

Небольшие, но ВАЖНЫЕ уведомления:

  1. FB.getLoginStatus должен вызываться после FB.init, в противном случае событие не будет запущено.

  2. вы можете использовать FB.Event.subscribe('auth.statusChange', callback), но он не сработает, когда пользователь не вошел в Facebook.

Вот рабочий пример с обеими функциями 

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'));
2 голосов
/ 10 июня 2012

Вы можете подписаться на событие:

т) 

FB.Event.subscribe('auth.login', function(response) {
  FB.api('/me', function(response) {
    alert(response.name);
  });
});
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...