1

我正在编写一个 Chrome 扩展程序，它将一些 JS 注入页面。我的 JS 存储在script.js. 我使用 acontentscript.js来实际进行注入（如this SO answer中所建议的那样）。这一切都很好。

我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在 my 之前得到评估script.js，从而导致诸如“$ undefined”和“Object does not have ... method”（对于插件）之类的错误。

仅供参考，我知道这不是一个巨大的阻塞问题，因为当它们都被缓存并以正确的顺序加载时，我的扩展程序可以完美运行。这就是让我相信问题在于负载的原因。

如何执行我需要的关于如何评估我的脚本的顺序？

4

3 回答 3

2

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

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"]);
于 2013-01-29T04:03:51.380 回答
1

onload通过在前一个插件的处理程序中加载下一个插件，链接每个插件的加载。

于 2013-01-28T22:54:26.680 回答
0

在您注入的脚本上设置async=false。

这是以任何顺序加载脚本但按添加顺序执行的符合规范的方式。

从深潜到脚本加载的浑水：

[
  '1.js',
  '2.js'
].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.head.appendChild(script);
});

规范说：一起下载，全部下载后按顺序执行。

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

Safari 5.0 说：我理解“异步”，但不理解用 JS 将其设置为“false”。我会在你的脚本落地后立即执行，无论顺序如何。

IE < 10 说：不知道“异步”，但是有一个 使用“onreadystatechange”的解决方法。

其他红色的浏览器说：我不明白这个“异步”的东西，我会在你的脚本落地后立即执行，无论顺序如何。

其他一切都在说：我是你的朋友，我们将照本宣科。

于 2017-04-21T22:08:00.447 回答