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位于脚本标记的source属性中。

// 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添加脚本时，脚本会保留在那里。~~ 当您将script追加到head元素的末尾时，jQuery会将script标记附加到body元素。

Amara似乎试图通过获取最后一个脚本标记src来获取其“环境”域，因为它假定最后一个将是加载它的那个。在这种情况下哪个是错的，这就是为什么它的域名出错了。

动态加载JS动态加载更多JS

2 个答案: