动态加载 JS 动态加载更多 JS答案

【问题标题】：Dynamically Load JS Dynamically Loads More JS动态加载 JS 动态加载更多 JS
【发布时间】：2016-09-26 05:39:40
【问题描述】：

请在说“使用$.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);
})();

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

这会成功，因为它从amara.org 域执行GETs：

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')，结果相同。

我无法找到将其标识为预期功能的文档，也无法找到解决方法。

【问题讨论】：

你想附加一个
抱歉，打错了。当我看到你的评论弹出时，我实际上正在修复它。 ^^'

标签： javascript jquery dynamic-loading jquery-append

【解决方案1】：

404 错误来自 amara.org 脚本，而不是 jQuery 请求。当它在 jQuery 函数中运行时，我敢打赌 this 的某种上下文被错误地分配了。

编辑：找到了。该代码取决于其 url 在脚本标记的源属性中。

// 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;

【讨论】：

好的，所以这不是我的代码的问题，但您是 Amara，这意味着我无法通过通用加载来解决它。相反，我必须提取他们的脚本，修改它，然后加载它。听起来对吗？
最好是让他们知道脚本的问题，同时临时修改它。

【解决方案2】：

~~看起来 jQuery 添加了script 标签，然后尽快将其删除。当您使用“vanilla” JS 添加脚本时，脚本会保留在那里。~~ jQuery 将 script 标记附加到 head 元素，而您将 script 附加到 body 元素的末尾。

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

【讨论】：