Question

我正在尝试更改位于主脚本下方的页面头部的脚本的src属性。以下是代码的一部分：

＆＃xA;＆＃xA;

  function loadLevel（l）{＆＃xA; switch（l）{＆＃xA;案例0：＆＃xA; document.getElementById（“level”）。src =“levels / level0.js”;＆＃xA; level0.load（）;＆＃XA;打破;＆＃XA;案例1：＆＃xA; document.getElementById（“level”）。src =“levels / level1.js”;＆＃xA; level1.load（）;＆＃XA;打破;＆＃XA; }＆＃XA; level = l;＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

脚本的代码：

＆＃xA;＆＃xA ;

 ＆lt; script id =“level”src =“”＆gt;＆lt; / script＆gt;＆＃xA;

＆＃xA;＆＃xA;

函数loadLevel（l）被调用，交换机检查l的值，相应地改变名为“level”的脚本源的值，并调用正确的加载函数。对象level0和level1及其加载函数分别存储在文件level0.js和level1.js中。

＆＃xA;＆＃xA;

但是当我这样做时，它将无法正常工作。 level0.js和level1.js在它们中没有错误，因为当我这样做时它会加载0级，但是当我按下按钮时它显然不是1级：

＆＃xA;＆＃xA; < pre> ＆lt; script id =“level”src =“levels / level0.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆＃xA;

Answer 1

当您加载一个新脚本时，该过程是异步的，因此在脚本无法加载后无法正常调用该函数，完成后您需要回调。

function loadLevel(level) {

  (function(d, script) {
      script = d.createElement('script');
      script.type = 'text/javascript';
      script.async = true;
      script.onload = function(){

        /*
          Your script has loaded
          You can now call the code you have loaded
         */

      };
    script.src = '/levels/level' + level + '.js';
    d.getElementsByTagName('head')[0].appendChild(script);
  }(document));

}

Answer 2

我推荐您使用模块而不是常规脚本。这是您可以使用的代码：

async function loadLevel(l){
let {load}= await import("/levels/level"+l+".js");
load();
}

在您的关卡脚本中：

function load(){
//Your code
}
export {load};

以及一些模块参考：https://javascript.info/modules-intro，https://javascript.info/import-export，https://javascript.info/modules-dynamic-imports 这是我在Github上的示例代码：https://github.com/Learndev-student/Example/tree/main/Example%20001 并查看它是否在网络上运行：https://learndev-student.github.io/Example/Example%20001/index.html

如何在JavaScript中更改<script>元素的来源？

2 个答案: