我正在编写一个 Chrome 扩展程序,它将一些 JS 注入(inject)到页面上。我的 JS 存储在 script.js
中。我使用 contentscript.js
实际进行注入(inject)(如 this SO answer 中所推荐)。这一切都很好。
我的 script.js
使用 jQuery,因此需要 jquery.js
和一堆插件来注入(inject)。所以我的 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 does not have ... method”之类的错误(针对插件)。
仅供引用,我知道这不是什么大的阻塞问题,因为当它们全部缓存并以正确的顺序加载时,我的扩展可以完美运行。这就是让我相信问题出在负载上的原因。
如何强制执行我需要的脚本评估顺序?
最佳答案
我希望您不是字面上通过实际编写相同代码五次,嵌套五层来将负载链接在一起。这可以通过队列和单个函数以非常直接的方式解决:
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"]);
关于javascript - 注入(inject)脚本的评估顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14572721/