我对动态加载JS文件到DOM中的要求有些困惑。
当我在HTML文件中包含时,example.js会正常运行。
当我包含时,它会将
当我在HTML文件中包含时,example.js会正常运行。
当我包含时,它会将
所以我发现问题在于我解决代码的顺序。这花了很长时间才找到原因,因为我的代码本身没有任何问题,但是顺序是错误的。
我按正确的顺序调用所有内容,但是在我的网络面板中,事情的解决顺序是错误的。
一旦我修复了将事物加载到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 函数中,这可能并没有起到帮助作用。
<script src="example.js"></script>
添加到 DOM 的<head>
标签中,但不运行。修改了execute()
函数,因为头部引用需要更改以适应这种情况。 - Josh Balsillieexecute( anyScriptElement );
在<script src="add-example-dynamically.js"></script>
加载之前尝试执行的方式部分解决了这个问题。因为我使用XMLHttpRequest();
读取外部文件,我尝试将xhr.open("GET", "content.html", true);
设置为 false,这解决了内容加载到 example.html 的顺序问题。然而,在各种浏览器中同步 XMLHttpRequest 已被弃用(至少我使用的方式)。 - Josh Balsillie