Ошибка проверки потока: f js .parentNode.insertBefore

Question

Вот код

// Load the SDK asynchronously
((d, s, id) => {
    let js = null;
    let fjs = null;
    // eslint-disable-next-line prefer-destructuring
    fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = '//connect.facebook.net/en_US/sdk.js';
    fjs.parentNode.insertBefore(js, fjs);
})(document, 'script', 'facebook-jssdk');

Вот ошибка проверки потока:

Невозможно вызвать fjs.parentNode.insertBefore, так как свойство insertBefore отсутствует в null или не определено [1].

Как это исправить? Спасибо.

Answer 1

Проблема в том, что по какой-то причине не удалось найти тег <script>. Итак, давайте вместо этого попробуем добавить его в документ где-нибудь:

// Load the SDK asynchronously
((d, s, id) => {
    let js = null;
    let fjs = null;
    // eslint-disable-next-line prefer-destructuring
    fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = '//connect.facebook.net/en_US/sdk.js';
    (fjs ? fjs.parentNode : document.lastElementChild).insertBefore(js, fjs);
})(document, 'script', 'facebook-jssdk');

Кажется, это исправить. Надеюсь, это поможет. В качестве альтернативы, я бы рекомендовал сделать следующее, если вам нужно загрузить SDK на рабочий сайт. Использование setTimeout с задержкой 0ms эквивалентно setImmediate, если вложенность не превышает 4 глубины.

<script>setTimeout(function(){var d=document, s=d.createElement("script");s.id="facebook-jssdk";s.src="//connect.facebook.net/en_US/sdk.js";(d.head||d.all[1]).appendChild(s)},0);</script>

Мой фрагмент кода выше будет асинхронно загружать скрипт сразу после события DOMContentLoaded, так что window.onload не будет заблокирован. Мой код должен работать прилично в IE4 + и лучше всего в IE10 +, но SDK может работать или не работать в таких старых браузерах.