Javascript 注入脚本的求值顺序

我正在写一个Chrome扩展，它在页面上注入了一些JS。我的JS存储在

script.JS

中。我使用

contentscript.js

来实际执行注入（如中所建议的）。这一切都很好

我的

script.js

使用jQuery，因此需要

jQuery.js

和一堆插件来注入。因此，我的

contentscript.js

如下所示：

var a = document.createElement('script');
a.src = chrome.extension.getURL("jquery.min.js");
a.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(a);

...4 more similiar plugin script injections...

var s = document.createElement('script');
s.src = chrome.extension.getURL("script.js");
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);

script.js

中的顺序是必须对其求值的顺序

我的问题是，根据加载方式的不同，我似乎无法保证

jquery.min.js

在

script.js

之前得到评估，从而导致错误，如“$undefined”和“Object没有…method”（对于插件）

仅供参考，我知道这不是什么大的阻塞问题，因为当它们都被缓存并以正确的顺序加载时，我的扩展工作得很好。这让我相信问题出在装载上

---

如何执行脚本评估所需的顺序？

通过在上一个插件的

onload

处理程序中加载下一个插件，将每个插件的加载链接起来。

我希望您不是通过实际编写五次相同的代码，嵌套五层，将加载链接在一起。这可以通过一个队列和一个函数以非常直接的方式解决：

function loadNextPlugin(plugins) {
  // "pop" the next script off the front of the queue
  var nextPlugin = plugins.shift();

  // load it, and recursively invoke loadNextPlugin on the remaining queue
  var tag = document.createElement('script');
  tag.src = chrome.extension.getURL(nextPlugin);
  tag.onload = function() {
    if (plugins.length)
      loadNextPlugin(plugins);
  }
  (document.head||document.documentElement).appendChild(a);
}


loadNextPlugin(["jquery.min.js", "script2.js", "script3.js", "script.js"]);

---

在注入的脚本上设置

async=false

这是一种符合规范的方式，可以按任意顺序加载脚本，但按添加的顺序执行

发件人：

规范说明：一起下载，下载完成后按顺序执行

Firefox<3.6，Opera说：我不知道这个“异步”的东西是什么，但碰巧我按顺序执行通过JS添加的脚本 它们被添加了

Safari 5.0说：我理解“异步”，但不理解用JS将其设置为“false”。我会尽快执行你的脚本 他们以任何顺序降落

IE<10说：不知道“异步”，但是 使用“onreadystatechange”

其他说法：我不理解“异步”这件事，我会尽快执行您的脚本 当他们降落时，无论顺序如何

其他一切都说明了：我是你的朋友，我们会照章办事

---

不幸的是，根据我的经验，许多合适的Javascript都是如此。JS非常需要类似Lisp的宏。@KarlBarker它看起来不可怕。。。看看我的答案，我…是的。我真的不精通JS，所以我没有尝试改进它：）现在就使用它——尽管在添加

之前我遇到了“documentnotdefined”错误在函数定义的
onload
之后？是的，应该有一个分号终止
tag.online=…
语句。这不是经过测试的代码，我写它更多的是作为指导。当然，我只是检查：）就像我说的，我没有做太多的JS。
[
  '1.js',
  '2.js'
].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.head.appendChild(script);
});