异步加载Facebook Javascript SDK

时间:2011-10-08 07:47:47

标签: asp.net facebook facebook-graph-api facebook-javascript-sdk

我正在尝试异步加载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不存在。

是什么给出了?

2 个答案:

答案 0 :(得分:2)

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
}

答案 1 :(得分:1)

这意味着FB在初始化之前被调用。由于它是初始化为异步的,因此在您第一次使用FB之前,我建议您在视图中编写FB.init代码而不是包含它。像这样使用 -

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