JS：在其他脚本之前解析动态添加的脚本答案

【问题标题】：JS: parse dynamically added script before other scriptsJS：在其他脚本之前解析动态添加的脚本
【发布时间】：2018-06-29 14:18:05
【问题描述】：

我想在我的页面上显示以下内容：

一个脚本（“script1.js”）动态添加第二个脚本（“script2.js”）到页面。
第三个脚本（“script3.js”）。

"script3" 覆盖了"script2" 中的部分函数，因此脚本的解析顺序为：

脚本1 > 脚本2 > 脚本3。

控制台应该显示：1 2 3。相反，我看到的是 1 3 2。

我尝试在“script3”上使用“defer”但没有成功：

HTML 文件：

<html>
<head>
    <script src="script1.js"></script>
    <script defer type='text/javascript' src="script3.js"></script>
</head>
</html>

script1.js：

console.log('1');
var head = document.getElementsByTagName('head')[0];
const url = 'script2.js';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
head.appendChild(script);

script2.js：

console.log('2');

script3.js：

console.log('3');

【问题讨论】：

如果这是 script1 中的确切代码，您可以将其作为脚本标签包含在内，但我想这不是一个选项。一种解决方法是同时动态加载第三个脚本，但根据在第二个脚本之后应该加载的脚本数量可能会使这不可行
您的变通办法确实有效，但我希望将第三个脚本固定在 HTML 中，而将第二个脚本动态加载。
您是否查看过 jQuery.getScript() 或类似的东西，您可以在其中链接加载脚本？ api.jquery.com/jQuery.getScript
jQuery 是要动态加载的脚本之一。所以解决方案必须是 vanilla js/html。

标签： javascript html

【解决方案1】：

虽然听起来很丑，但您可以在script1.js 中使用document.write 来加载script2.js。脚本将以正确的顺序执行。

// script1.js
console.log('1');
document.write('<script src="script2.js"></script>');

【讨论】：

像魅力一样工作，不敢相信我以前没有尝试过。我在其他各种问题上看到了这一点，但不知何故忽略了它（在我的情况下安全不是问题）。谢谢！