Загрузка 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

Ответ Сахиля правильный. К тому времени, когда документ будет обработан, нет никаких гарантий, что какие-либо асинхронные сценарии уже загружены.

Если запуск вашего кода из-за обратного вызова 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 ..
};