Question

我正在尝试使用appendChild DOM方法在index.html文件中动态加载js脚本。我试图在下一行中使用动态加载的js中的某些函数，但是却收到错误消息，即指定的函数未定义。我知道此错误是由于在浏览器中加载脚本的异步行为引起的。我也使用async标志为false，但没有用。下面是示例代码。

<script> 
var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");
js.type = "text/javascript";
js.async = false;
js.src = "https://example.com/test.js"; // There are two variants of test.js is there. Will be changing it dynamically based on conditional check.
head.appendChild(js);
</script>
<script> 
   test(); // Method inside test.js
</script>

我希望在执行appendChild代码部分后立即加载test.js。请帮我。请建议是否还有其他方法可用于我的目的。

Answer 1

不建议使用同步XHR。您需要添加事件侦听器，以便可以在脚本加载后立即调用代码。下面的示例：

var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");
head.appendChild(js);
js.onload = function() {
  console.log("yes", window.$)
};
js.src = "//code.jquery.com/jquery-3.3.1.min.js";
console.log("nope", window.$)

如何从动态加载的脚本运行函数

1 个答案: