javascript - 无法从动态加载的 javascript 文件调用函数

Question

我正在从文档中存在的另一个 javascript 文件加载一个 javascript 外部文件，并且自从其加载后，我想从加载的 js 文件中调用一个函数。这是加载函数:

function loadScript(url) {
    var head = window.top.document.getElementsByTagName('head')[0];
    var script = window.top.document.createElement('script');
    script.src = url;
    script.type= "text/javascript";
    head.appendChild(script);
    if(script.readyState) {  //IE
        script.onreadystatechange = function() {
            if ( script.readyState === "loaded" || script.readyState === "complete" ) {
                script.onreadystatechange = null;
                console.log("[BANDEAU] script loaded");
                testAlert();
            }
        };
    } else {  //Others
        script.onload = function() {
            console.log("[BANDEAU] script loaded");
            testAlert();
        };
    }
}

所以效果很好，因为 javascript 文件已成功加载，但我无法从加载的 javascript 文件访问 testAlert() 方法，正如我在打印脚本后在上面的代码中尝试的那样已加载。当我尝试在 window[testAlert] 上使用 typeOf 获取函数的类型时，我得到一个未定义的值。但是当我尝试在开发人员控制台中执行 testAlert() 方法时，它工作得很好。有人看到我做错了什么吗？

DOM 中调用者 javascript 文件和加载的 javascript 文件之间的位置可能是原因吗？

Answer 1

您需要在更改 src 之前分配负载处理程序

function loadScript(url) {
  var head = document.getElementsByTagName('head')[0]; // window.top in frames/iFrames
  var script = document.createElement('script');
  script.type = "text/javascript";

  if (script.readyState) { //IE
    script.onreadystatechange = function() {
      if (script.readyState === "loaded" || script.readyState === "complete") {
        script.onreadystatechange = null;
        console.log("[BANDEAU] script loaded");
        testAlert(); // window.top.testAlert() if needed
      }
    };
  }
  else {
    script.onload = function() {
      console.log("[BANDEAU] script loaded");
      testAlert(); // window.top.testAlert() if needed
    };
  }
  script.src = url;
  head.appendChild(script);
}