立即执行动态加载的 JS 脚本答案

【问题标题】：Immediately execute dynamically loaded JS script立即执行动态加载的 JS 脚本
【发布时间】：2019-01-28 16:37:05
【问题描述】：

在我的文档顶部，我动态加载了一个脚本：

<script>
var script = document.createElement("script");
script.setAttribute("src", "mydomain.com/main.js");
var head = document.head;
head.insertBefore(script, head.firstChild);
</script>

main.js 的内容：

console.log('test');

但是，页面在输出test 之前完全加载。在网络面板中，我还可以看到在脚本最终执行之前加载的所有图像。

如何让脚本在插入文档后直接加载执行？

【问题讨论】：

您好，我的问题是关于动态插入的脚本标签，您发布的问题涉及常规脚本标签。
这听起来像是 X/Y 问题。您实际上想在这里做什么？这是一个非常不常见的场景......
我正在尝试根据域加载外部 js 文件。例如：domain1.com --> main1.js domain2.com --> main2.js 但是我需要代码尽快执行，而不是在渲染之后。
这很可能是问题所在：根据developer.mozilla.org/en-US/docs/Web/HTML/Element/…，动态插入的脚本默认是异步的。但是，即使我设置了script.async = false;，页面仍然会在控制台输出出现之前呈现。

标签： javascript html dynamic-script-loading

【解决方案1】：

我自己找到了解决方案。 Dynamically inserted scripts are treated as async by default。将其设置为 async=false 已修复：

<script>
var script = document.createElement("script");
script.setAttribute("src", "mydomain.com/main.js");
script.setAttribute("async", "false");
var head = document.head;
head.insertBefore(script, head.firstChild);
</script>

【讨论】：

【解决方案2】：

将此script 标记移动到html 的头部。那么它应该向您保证脚本在渲染任何主体之前执行。您也可以将此脚本添加到 body 标记的开头。

【讨论】：

您好，感谢您的回复。它已经在头顶了。但是，它仍然只有在呈现整个页面后才会控制台。