Динамически загружать JS Динамически загружать больше JS

Question

Пожалуйста, прочитайте ситуацию, прежде чем сказать: "Используйте $.getScript(fileURL) или же $('body').append($('<script>', {type" 'text/javascript', src: fileURL})) ".

Я пытаюсь использовать Amara Embedder для ссылки на видео. Обычно я бы не стал использовать jQuery для столь простой задачи, но у меня не было выбора в этом вопросе.

Итак, сначала я попробовал самый простой вариант:

$(function() {
  $.getScript('https://amara.org/embedder-iframe');
});

<div class="amara-embed" data-height="480px" data-width="854px" data-url="http://www.youtube.com/watch?v=5CKwCfLUwj4"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Это терпит неудачу с записью консоли, подобной:

GET https://domain.com/embedder-widget-iframe/?data=%7B%22hei…22url%22%3A%22http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D5CKwCfLUwj4%22%7D 404 (Not Found)

Как видно из примера, это не так хорошо работает. Проблема в том, что вместо выполнения сценария и использования amara.org домен в качестве базового URL, сценарий выполняется с использованием домена, где $.getScript() был казнен.

Используя JavaScript, просто создать SCRIPT элемент и добавив его к BODY чтобы это работало.

window.onload = (function() {
  var link = document.createElement('script');
  link.type = 'text/javascript';
  link.src = 'https://amara.org/embedder-iframe';
  document.getElementsByTagName('body')[0].appendChild(link);
})();

<div class="amara-embed" data-height="480px" data-width="854px" data-url="http://www.youtube.com/watch?v=5CKwCfLUwj4"></div>

Это успешно, потому что он выполняет GET с из amara.org домен:

https://amara.org/embedder-widget-iframe/?data=%7B%22height%22%3A%22480px%22%2C%22width%22%3A%22854px%22%2C%22url%22%3A%22http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D5CKwCfLUwj4%22%7D

Теперь я попробовал варианты в jQuery, такие как $('body').append($('<script>', {type" 'text/javascript', src: 'https://amara.org/embedder-iframe'})) а также $('<script>', {type" 'text/javascript', src: 'https://amara.org/embedder-iframe'}).appendTo('body') с одинаковыми результатами.

Мне не удалось найти документацию, определяющую это как предполагаемую функциональность или как это можно обойти.

Answer 1

Ошибка 404 исходит из скрипта amara.org, а не из запроса jQuery. Когда он запускается внутри функции jQuery, я бы поспорил, что-то вроде контекста this неправильно назначается.

РЕДАКТИРОВАТЬ: нашел. Код зависит от того, находится ли его URL в атрибуте источника тега script.

// This must be done when the js file is first loaded
var scriptFiles = document.getElementsByTagName("script");
var THIS_JS_FILE = scriptFiles[scriptFiles.length-1].src;

Answer 2

Похоже, JQuery добавляет script тег, а затем удаляет его как можно скорее. Когда вы добавляете скрипт с "vanilla" JS, скрипт остается там. JQuery добавляет script тег к head элемент, пока вы добавляете script до конца body элемент.

Похоже, Amara пытается получить свой "окружающий" домен с помощью последнего тега скрипта. src, поскольку предполагается, что последним будет тот, с которым он был загружен. Что не так в этой ситуации, и именно поэтому он получает неправильное доменное имя.