Question

我正在寻找允许我使用JavaScript以非异步方式加载另一个JavaScript文件的代码。我试过这个：

var script=document.createElement('script');
script.setAttribute("type","text/javascript");
script.setAttribute("src", "jquery.min.js");
document.getElementsByTagName("head")[0].appendChild(script);

$("div.whatever").css("color","red");

但这不起作用。它可以插入脚本节点，但在jQuery加载之前它会继续运行脚本的其余部分。这最终失败了，因为jQuery代码试图在jQuery尚未定义$时运行。

有没有办法使用原生JS加载该脚本非异步？

Answer 1

您可以使用<script>节点.onload事件处理程序来继续/执行在加载脚本后应执行的任何代码，例如

script.onload = function() {
    // continune here
};

或者您可以尝试将async标记设置为false

script.setAttribute("async", false);

虽然前一个解决方案几乎适用于任何可用的浏览器，但后者可能不受旧浏览器支持。

Answer 2

不是同步加载，而是使用onload：

script.onload = function() {
  // $ is defined now
};

// append it only now to make sure it does not load before setting onload
document.getElementsByTagName("head")[0].appendChild(script);

JavaScript - 如何非异步加载外部脚本？

2 个答案: