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

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

异步加载Facebook Javascript SDK

2 个答案: