异步加载Facebook

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

萨希尔的回答是正确的。在呈现文档时，无法保证已经加载了任何异步脚本。

如果在fbAsyncInit回调内部运行代码不是您想要的，您可以考虑两种替代方法：

选项1

加载SDK同步：

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