JavaScript: динамическое внедрение script в head. Почему такие ошибки?

Question

[Павел Китьян]

Вариант 1.

$('head').append($('<script async type="text/javascript" src="' + fileName + '"></script>'));

Вариант 2.

var node = document.createElement('script');
node.async = true;
node.src = fileName;
$('head')[0].appendChild(node);

Вариант 2 работает нормально, а вот с Вариантом 1 проблемы.

В Chrome при запуске локального файла сообщает:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check xhr.spec.whatwg.org

Да еще и:

XMLHttpRequest cannot load file:///путь_к_файлу. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource

В Firefox:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help xhr.spec.whatwg.org

Но почему? Метод .append в JQuery также работает через appendChild. Почему такая разница?
Почему возникает синхронный ajax-запрос в первом случае и вообще (?!) не расценивается как ajax-запрос во втором?

Answer 1

[Alexey Bykov]

Проблема jQuery.
Стандартный JS не умеет парсить скрипты из HTML ( то есть element.innerHTML="" не будет грузить скрипт, просто будет создан dom элемент).
В jQuery для этого сделали специальный костыль, когда jQuery видит что кто-то пытается создать script-tag, они запускают синхронный ХHR, чтобы скачать тело скрипта и запустить его.

Comments

[Павел Китьян]

Действительно! Я еще проверил адским способом:

$('head').html($('head').html() + '...');

...и получил те же проблемы, да вдобавок еще и XHR-ошибку для всех script, которые уже были в head. А вот:

$('head')[0].innerHTML = $('head')[0].innerHTML + '...';

...ошибок не дал, но и скрипт не выполнился.

Спасибо!