JavaScript注入未按预期工作

Question

我正在使用外部文件作为src注入脚本标签，然后调用回调函数来注入HTML。但是当我进行调试时，它的执行顺序如下：

1. 注入jquery。
2. 注入HTML（回调函数）
3. 注入剩余的脚本标签。

请问有人能够解释一下如何解决这个问题，使其按照以下顺序执行呢？

1. 注入所有脚本。
2. 注入HTML。

Injection.js 文件：

injectJavaScripts([
    "lib/jquery/dist/jquery.js",
    "lib/angular/angular.js",
    "lib/angular-route/angular-route.js",
    "lib/ui-router/release/angular-ui-router.js",
    "src/app.js",
    "src/LoginController.js",
    "src/LogoutController.js",
    "src/MainController.js"
], function() {
    injectHTML();
});

function injectJavaScripts(urls, callback) {
    var elements = [];
    urls.forEach(function (url) {
        var s = document.createElement('script');
        s.src = chrome.extension.getURL(url);
        elements.push(s);
    });

    var target = document.body || document.documentElement;
    var i = 0;
    var patchNext = function () {
        if (i >= elements.length) return;
        else if (i > 0) {
            elements[i - 1].onload = null;
        }

        elements[i].onload = patchNext;
        target.appendChild(elements[i]);

        i += 1;
    };
    patchNext();
    callback();
};

function injectHTML() {
    var logged = false;
    var cheapWatcherDiv = document.createElement('div');
    cheapWatcherDiv.setAttribute('class', 'cheap-watcher');
    document.body.appendChild(cheapWatcherDiv);

    if (logged == false) {
        $(".cheap-watcher").load(chrome.extension.getURL('views/main.html'));
        $('head').append('<link rel="stylesheet" href="' + chrome.extension.getURL('sass/main.css') + '" type="text/css" />');
    } else {
        $(".cheap-watcher").load(chrome.extension.getURL('views/logoutTemplate.html'));
    }
};

- Nikas Žalias

---

抱歉，我忘记删除这行代码了。我已经尝试过使用准备好的代码，但现在没有了。我会更新我的帖子 - @Hacketo - Nikas Žalias

Answer 1

你在错误的位置调用了callback()，实际上应该在所有脚本注入后才调用。但你是在第一次调用patchNext后才调用的。

修改你的injectJavaScripts函数，当所有脚本都被注入后再调用callback()。

function injectJavaScripts(urls, callback) {
    var elements = [];
    urls.forEach(function (url) {
        var s = document.createElement('script');
        s.src = chrome.extension.getURL(url);
        elements.push(s);
    });

    var target = document.body || document.documentElement;
    var i = 0;
    var patchNext = function () {
        if (i >= elements.length) {
            // All scripts are injected now
            // ok to invoke callback() here
            callback();
            return;
        }
        else if (i > 0) {
            elements[i - 1].onload = null;
        }

        elements[i].onload = patchNext;
        target.appendChild(elements[i]);

        i += 1;
    };
    patchNext();
    // callback(); don't call here
};

- Adnan Umer

---

有道理，谢谢！现在它可以正常工作了 - @AdnanUmer - Nikas Žalias