如何动态地将 JavaScript 文件加载到 HTML 中

Question

如何动态地将 JavaScript 文件加载到 HTML 中

javascripthtml

6

我对动态加载JS文件到DOM中的要求有些困惑。

当我在HTML文件中包含时，example.js会正常运行。

当我包含时，它会将

- Josh Balsillie

所以我使用XMLHttpRequest从HTML文件获取脚本标签。一旦请求状态 === 200 并且 readyState === 4，我会在将它们附加到 example.html 的 <head> 标签之前，在每个标签上使用我的 toExecutable 函数。 - Josh Balsillie

这就是为什么我在示例中没有声明anyScriptElement的原因，因为那部分似乎大部分都能正常工作。我只是无法弄清楚为什么它会将包含JS源代码的脚本添加到DOM中，但不执行JS文件。 - Josh Balsillie

尝试了以下操作（htmlCollection是一个包含head对象的HTML集合变量）：（1）domHead.textContent = theRequest.responseText; // 将HTML作为带引号的字符串添加（2）domHead.textContent = htmlCollection.innerHTML; // 将HTML作为带引号的字符串添加（3）domHead.textContent = htmlCollection.innerHTML.replace('"',''); // 将HTML作为不带引号的字符串添加 - Josh Balsillie

我在 add-example-dynamically.js 示例中添加了一个简短的脚本，它将 <script src="example.js"></script> 添加到 DOM 的 <head> 标签中，但不运行。修改了 execute() 函数，因为头部引用需要更改以适应这种情况。 - Josh Balsillie

所以我通过识别 example.html > execute( anyScriptElement ); 在 <script src="add-example-dynamically.js"></script> 加载之前尝试执行的方式部分解决了这个问题。因为我使用 XMLHttpRequest(); 读取外部文件，我尝试将 xhr.open("GET", "content.html", true); 设置为 false，这解决了内容加载到 example.html 的顺序问题。然而，在各种浏览器中同步 XMLHttpRequest 已被弃用（至少我使用的方式）。 - Josh Balsillie

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Balsillie · Answer 1

所以我发现问题在于我解决代码的顺序。这花了很长时间才找到原因，因为我的代码本身没有任何问题，但是顺序是错误的。

我按正确的顺序调用所有内容，但是在我的网络面板中，事情的解决顺序是错误的。

一旦我修复了将事物加载到DOM中的顺序，一切都按预期工作了。

解决方法 #1

由于我的XMLHttpReqests应该是异步的，我将所有调用放入单个Javascript文件中，以使它们同步运行。

我需要在加载引用这些文件的函数调用之前将Javascript文件加载到标签中。

我将函数调用包装在window.onload = function(){}中。

基本上，我的最终解决方案是对我在example.html中动态放置的任何<script>code</script>进行包装，在其中加入window.onload = function(){}.

例如：<script>window.onload = function(){ code }</script>

解决方法 #2

我曾在一个不合适的位置使用了 onload 包装器 window.onload = function(){}。同时，在调试过程中，它可能曾经被嵌套在另一个 window.onload 函数中，这可能并没有起到帮助作用。