異步加載Facebook Javascript SDK

Question

我正在嘗試異步加載all.js文件。

在我的ASCX文件中：

<div id="fb-root"></div>

我有一個包含javascript文件的用戶控件：

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

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

但是，當頁面呈現並加載時，FB不存在。

是什么賦予了？

Answer 1

Sahil的回答是正確的。 在呈現文檔時，無法保證已加載任何異步腳本。

如果從fbAsyncInit回調中運行代碼不是您想要的，您可以考慮兩種替代方法：

選項1

加載SDK synchronousy：

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>

通過這樣做， FB甚至在文檔開始渲染之前就會存在。

選項2

檢查SDK是否已經加載，並在沒有時提供回退解決方案。

if (window.FB) {
    // use FB here ..
} else {
    // still loading, tell user to wait one more second
}

Answer 2

這意味着FB在初始化之前被調用。 由於它是初始化為異步，因此在您第一次使用FB之前，我建議您在視圖中編寫FB.init代碼而不是包含它。 像這樣使用 -

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