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

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);