как интегрировать сторонние библиотеки JavaScript в пользовательские скрипты

Question

Для этого пользовательского сценария, который я пишу, мне нужно использовать стороннюю библиотеку JavaScript, которая имеет 3 файла JavaScript.Поскольку @require не работает в Chrome, как я могу добавить несколько внешних библиотек JavaScript в пользовательский скрипт?Я рассматриваю все возможности, прежде чем выбрать одну.

Я знаю, что вы можете добавить jQuery, используя этот метод.Я лично использовал это.Можно ли добавить другие библиотеки, используя этот обходной путь?

Answer 1

Попробуйте добавить следующую функцию в свой пользовательский скрипт,

/**
 * Dynamically loading javascript files.
 *
 * @param filename url of the file
 * @param callback callback function, called when file is downloaded and ready
 */
function loadjscssfile(filename, callback) {
    var fileref = document.createElement('script')
    fileref.setAttribute("type", "text/javascript")
    fileref.setAttribute("src", filename)
    if (fileref.readyState) {
        fileref.onreadystatechange = function() { /*IE*/
            if (fileref.readyState == "loaded" || fileref.readyState == "complete") {
                fileref.onreadystatechange = null;
                callback();
            }
        }
    } else {
        fileref.onload = function() {  /*Other browsers*/
            callback();
        }
    }

    // Try to find the head, otherwise default to the documentElement
    if (typeof fileref != "undefined")
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(fileref)
}

Поскольку файлы загружаются асинхронно, а порядок загрузки файлов не гарантируется, чем для нескольких внешних файлов вызывайте эту функцию в отдельной функции, например,

loadjscssfile("http://code.jquery.com/jquery-1.6.3.min.js", function() {
    loadjscssfile("http://www.abc.org./script/otherFile.js", function() {
       // call your function that depends on the external libriries here.
     });
});

Цепочка столько внешних файлов, сколько вам нужно, порядок загрузки файлов будет сохранен должным образом. Надеюсь, это поможет, всего наилучшего

Answer 2

Хотя остальные ответы тоже будут работать, мне нужно было немного больше гибкости.Вот версия, которую я придумал: http://userscripts.org/scripts/show/123588

Answer 3

function requireFiles(jsLibs, callback) 
{
    //array to hold the external libabry paths
    var jsLibs = new Array();
    jsLibs[0] = "http://code.jquery.com/jquery-1.7.1.min.js"
    jsLibs[1] = "https://raw.github.com/gildas-lormeau/zip.js/master/WebContent/zip.js"
    jsLibs[2] = "https://raw.github.com/gildas-lormeau/zip.js/master/WebContent/deflate.js"
    jsLibs[3] = "https://raw.github.com/gildas-lormeau/zip.js/master/WebContent/inflate.js"

    var index = 0;
    var requireNext = function() 
    {
        var script = document.createElement("script");
        if (index < jsLibs.length) 
        {
            script.addEventListener("load", requireNext, false);
            script.setAttribute("src", jsLibs[index++]);
        }
        else 
        {
            script.textContent = "(" + callback.toString() + ")()";
        }
        document.body.appendChild(script);
    }
    requireNext();
}


function otherCode()
{
    //rest of the script
}

requireFiles(otherCode);