Букмарклет дождитесь загрузки Javascript - PullRequest
20 голосов
/ 16 апреля 2009

У меня есть букмарклет, который загружает jQuery и некоторые другие библиотеки js.

Как мне:

  • Подождите, пока библиотека JavaScript, которую я использую, будет доступна / загружена. Если я попытаюсь использовать сценарий до его полной загрузки, например, используя функцию $ с jQuery перед его загрузкой, выдается неопределенное исключение.
  • Убедитесь, что загруженный мной букмарклет не будет кэширован (без использования заголовка сервера или, очевидно, из-за того, что это файл javascript: метатег )

Кто-нибудь знает, работает ли onload для динамически добавляемого JavaScript в IE? (чтобы противоречить этому сообщение )

Какое самое простое решение, самое чистое решение этих проблем?

Ответы [ 4 ]

24 голосов
/ 16 апреля 2009

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

РЕДАКТИРОВАТЬ : я сделал домашнее задание и фактически извлек функцию loadScript из кода jQuery для использования в вашей закладке. Это может быть полезно для многих (включая меня).

function loadScript(url, callback)
{
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script");
    script.src = url;

    // Attach handlers for all browsers
    var done = false;
    script.onload = script.onreadystatechange = function()
    {
        if( !done && ( !this.readyState 
                    || this.readyState == "loaded" 
                    || this.readyState == "complete") )
        {
            done = true;

            // Continue your code
            callback();

            // Handle memory leak in IE
            script.onload = script.onreadystatechange = null;
            head.removeChild( script );
        }
    };

    head.appendChild(script);
}


// Usage: 
// This code loads jQuery and executes some code when jQuery is loaded
loadScript("https://code.jquery.com/jquery-latest.js", function()
{
    $('my_element').hide();
});
1 голос
/ 04 июня 2011

Я обратил внимание, что в Chrome порядок загружаемых скриптов не определен при использовании техники @Vincent Robert. В этом случае помогает небольшая модификация:


(function() {
    var callback = function() {
        // Do you work
    };
        // check for our library existence
    if (typeof (MyLib) == 'undefined') {
        var sources = [
                'http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js',
            'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js',
            'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js',
            'http://myhost.com/javascripts/mylib.min.js'];

        var loadNextScript = function() {
            if (sources.length > 0) {
                var script = document.createElement('script');
                script.src = sources.shift();
                document.body.appendChild(script);

                var done = false;
                script.onload = script.onreadystatechange = function() {
                    if (!done
                            && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
                        done = true;

                        // Handle memory leak in IE
                        script.onload = script.onreadystatechange = null;

                        loadNextScript();
                    }
                }
            } else {
                callback();
            }
        }
        loadNextScript();

    } else {
        callback();
    }
})();
1 голос
/ 16 апреля 2009

Чтобы ответить на ваш первый вопрос: Javascript интерпретируется последовательно, поэтому любой следующий код букмарклета не будет выполняться до тех пор, пока библиотека не будет загружена (при условии, что библиотека была интерпретирована успешно - без синтаксических ошибок).

Чтобы предотвратить кэширование файлов, вы можете добавить бессмысленную строку запроса ...

url = 'jquery.js?x=' + new Date().getTime();
0 голосов
/ 16 апреля 2009

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

...