Cách phát hiện khi FB.init của facebook hoàn tất

JS SDK cũ có một chức năng được gọi là FB.ensureInit. SDK mới dường như không có chức năng như vậy ... làm cách nào để đảm bảo rằng tôi không thực hiện lệnh gọi api cho đến khi nó được khởi tạo hoàn toàn?

Tôi bao gồm điều này ở đầu mỗi trang:

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

Cập nhật vào ngày 04/01/2012

Có vẻ như bạn không thể chỉ gọi các phương thức phụ thuộc FB (ví dụ FB.getAuthResponse()) ngay sau đó FB.init()như trước đây, vì FB.init()có vẻ như bây giờ là không đồng bộ. Gói mã của bạn vào FB.getLoginStatus()phản hồi dường như thực hiện mẹo phát hiện khi nào API đã hoàn toàn sẵn sàng:

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

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

};  

hoặc nếu sử dụng fbEnsureInit()triển khai từ bên dưới:

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

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

};  

Bài gốc:

Nếu bạn chỉ muốn chạy một số tập lệnh khi FB được khởi tạo, bạn có thể đặt một số hàm gọi lại bên trong 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
  };

Nếu bạn muốn thay thế chính xác FB.ensureInit thì bạn sẽ phải tự viết một cái gì đó vì không có sự thay thế chính thức (sai lầm lớn imo). Đây là những gì tôi sử dụng:

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

Sử dụng:

fbEnsureInit(function() {
    console.log("this will be run once FB is initialized");
});

Trên thực tế, Facebook đã cung cấp cơ chế đăng ký các sự kiện xác thực.

Trong trường hợp của bạn, bạn đang sử dụng " status: true " có nghĩa là đối tượng FB sẽ yêu cầu Facebook cấp trạng thái đăng nhập của người dùng.

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

Bằng cách gọi "FB.getLoginStatus ()", bạn đang chạy lại yêu cầu tương tự .

Thay vào đó bạn có thể sử dụng FB.Event.subscribe để đăng ký auth.statusChange hoặc auth.authResponseChange kiện TRƯỚC KHI bạn gọi 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
});

Rất có thể, khi sử dụng " status: false ", bạn có thể chạy bất kỳ mã nào ngay sau FB.init, vì sẽ không có lệnh gọi không đồng bộ.

Đây là một giải pháp trong trường hợp bạn sử dụng jquery và Facebook Đang tải chậm không đồng bộ:

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

Một cách khác để kiểm tra xem FB đã được khởi tạo hay chưa là sử dụng đoạn mã sau:

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

Vì vậy, trong sự kiện sẵn sàng trang của bạn, bạn có thể kiểm tra ns.FBInitialized và hoãn sự kiện sang giai đoạn sau bằng cách sử dụng setTimeOut.

Trong khi một số giải pháp ở trên hoạt động, tôi nghĩ rằng tôi sẽ đăng giải pháp cuối cùng của chúng tôi - xác định phương thức 'sẵn sàng' sẽ kích hoạt ngay khi FB được khởi tạo và sẵn sàng hoạt động. Nó có lợi thế hơn so với các giải pháp khác là nó an toàn để gọi trước hoặc sau khi FB sẵn sàng.

Nó có thể được sử dụng như vậy:

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

Đây là tệp nguồn (lưu ý rằng nó được xác định trong không gian tên '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
    };

})();

Tôi đã tránh sử dụng setTimeout bằng cách sử dụng một hàm toàn cầu:

CHỈNH SỬA LƯU Ý: Tôi đã cập nhật các tập lệnh trợ giúp sau và tạo một lớp dễ sử dụng hơn / đơn giản hơn; kiểm tra nó tại đây ::: https://github.com/tjmehta/fbExec.js

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

fbEnsureInit sẽ gọi nó là cuộc gọi lại sau FB.init

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

fbEnsureInitAndLoginStatus sẽ gọi nó là callback sau FB.init và sau 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.

      }
    });
  });
}

ví dụ sử dụng fbEnsureInit:

(FB.login cần được chạy sau khi FB đã được khởi tạo)

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

Ví dụ sử dụng fbEnsureInitAndLogin:

(FB.api cần được chạy sau khi FB.init và người dùng FB phải đăng nhập.)

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

Thay vì sử dụng bất kỳ setTimeout hoặc setInterval nào, tôi sẽ gắn bó với các đối tượng bị trì hoãn (triển khai bằng jQuery tại đây ). Vẫn còn khó khăn để giải quyết hàng đợi trong thời điểm thích hợp, vì init không có lệnh gọi lại nhưng kết hợp kết quả với đăng ký sự kiện (như ai đó đã chỉ trước tôi), nên thực hiện thủ thuật và đủ gần.

Đoạn mã giả sẽ trông như sau:

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

Đây là một phương pháp đơn giản hơn, không yêu cầu sự kiện hoặc thời gian chờ. Tuy nhiên, nó yêu cầu jQuery.

Sử dụng jQuery.holdReady() (tài liệu)

Vì vậy, ngay sau tập lệnh jQuery của bạn, hãy trì hoãn sự kiện đã sẵn sàng.

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

Sau đó, trong chức năng init Facebook của bạn, hãy phát hành nó:

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

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

Sau đó, bạn có thể sử dụng sự kiện sẵn sàng như bình thường:

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

Bạn có thể đăng ký sự kiện:

I E)

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

Thông báo nhỏ nhưng QUAN TRỌNG:

1. FB.getLoginStatusphải được gọi sau FB.init, nếu không nó sẽ không kích hoạt sự kiện.

2. bạn có thể sử dụng FB.Event.subscribe('auth.statusChange', callback), nhưng nó sẽ không kích hoạt khi người dùng không đăng nhập facebook.

Đây là ví dụ làm việc với cả hai chức năng

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

API Facebook theo dõi FB._apiKey, vì vậy bạn có thể theo dõi điều này trước khi gọi ứng dụng API của riêng bạn với một cái gì đó như:

window.fbAsyncInit = function() {
  FB.init({
    //...your init object
  });
  function myUseOfFB(){
    //...your FB API calls
  };
  function FBreadyState(){
    if(FB._apiKey) return myUseOfFB();
    setTimeout(FBreadyState, 100); // adjust time as-desired
  };
  FBreadyState();
}; 

Không chắc điều này tạo ra sự khác biệt nhưng trong trường hợp của tôi - vì tôi muốn chắc chắn rằng giao diện người dùng đã sẵn sàng - tôi đã gói quá trình khởi tạo với tài liệu của jQuery đã sẵn sàng (bit cuối cùng ở trên):

  $(document).ready(FBreadyState);

Cũng xin lưu ý rằng tôi KHÔNG sử dụng async = true để tải all.js của Facebook, điều này trong trường hợp của tôi dường như đang giúp đăng nhập vào giao diện người dùng và lái xe các tính năng đáng tin cậy hơn.

Đôi khi fbAsyncInit không hoạt động. Tôi không biết tại sao và sử dụng giải pháp này sau đó:

 var interval = window.setInterval(function(){
    if(typeof FB != 'undefined'){
        FB.init({
            appId      : 'your ID',
            cookie     : true,  // enable cookies to allow the server to access// the session
            xfbml      : true,  // parse social plugins on this page
            version    : 'v2.3' // use version 2.3
        });

        FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
        });
        clearInterval(interval);
    }
},100);