Проблемы с областью или временем при загрузке jQuery и jQueryUI в букмарклет через <script>? - PullRequest
Новая
       8

Проблемы с областью или временем при загрузке jQuery и jQueryUI в букмарклет через <script>?

1 голос
/ 07 сентября 2011

Редактировать: Обновлены сведения, чтобы добавить различия в поведении Firefox / Chrome

Я пытаюсь создать букмарклет, который будет загружать как jQuery, так и jQueryUI.В загрузке jQuery используется javascript, но я решил, что с момента загрузки jQuery, я бы использовал его для загрузки пользовательского интерфейса. Больше, чем заставить его работать, я действительно хочу понять, почему это не работает. Я все еще нахожусь в области видимости / замыканий / и т.д.Но я просто не понимаю, почему в Firefox $ не работает, а "JQuery" работает!$ Отлично работает в Chrome, но у меня возникает другая проблема.

Примечания:
1) В FireBug / FireFox я получаю голову '$ (")") не определено '
2) В Chrome" $ ​​"работает нормально, но вызов jQueryUI завершается неудачно с Object [object Object] не имеет метода' dialog '
3) обратный вызов гарантирует, что jQuery будет загружен, когда я попытаюсь его использовать.В Firefox, если я заменю «$» на «jQuery» (например, jQuery («head)), тогда код работает!.
4) на этой странице нет других библиотек, уже использующих $
5) Еще больше расстраивает, в Firefox, если я просто сдамся и использую "jQuery" вместо "$", а затем установлю обратный вызов из $ ("# jquilib"). Load () для вызоваВ-третьих, функции jQueryUI, такие как .tabs () и .dialog (), недоступны, даже если сам обратный вызов был вызван доступностью jQueryUI!
6) В Chrome проблема jQueryUI исчезает, еслиЯ использую setTimeout () до 100 мс. Если я опускаюсь до 1 мс или чего-то еще, чем проблема сохраняется.

Я использую функцию getScript из этого поста: http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet.

Ниже приведен мой код: 

function getScript(url,success){
    var script=document.createElement('script');
    script.src=url;
    var head=document.getElementsByTagName('head')[0],
        done=false;
    // Attach handlers for all browsers
    script.onload=script.onreadystatechange = function(){
      if ( !done && (!this.readyState
           || this.readyState == 'loaded'
           || this.readyState == 'complete') ) {
        done=true;
        success();
        script.onload = script.onreadystatechange = null;
        head.removeChild(script);
      }
    };
    head.appendChild(script);
}

function initializejQueryUI(){
    if (typeof jQuery.ui == 'undefined'){
        // jQueryUI library & jQueryUI cupertino theme
        $('head').append("<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css' type='text/css' rel='stylesheet'>");
        $('head').append("<script id='jquilib' type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>");
    }
    $("#jquilib").load($("<div>jQuery & UI Loaded!</div>").dialog());
}
getScript('https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js', initializejQueryUI); // call initializejQueryUI as callback when jQuery loads

1 Ответ

0 голосов
/ 08 сентября 2011

Хорошо, разобрался после лота пробной ошибки. Я пошел дальше и продолжил разработку своего скрипта в Chrome, похоже, я продвинулся дальше, чем в Firefox. Когда я закончил свой букмарклет, я попробовал его в Firefox по прихоти, и он тоже сработал! Вот что я узнал:

1) Вызов $("#jquilib").load($("<div>jQuery & UI Loaded!</div>").dialog()); не работает, потому что jQuery удаляет элементы, добавленные через append из DOM после обработки сценария! Проще было просто повторно использовать функцию getScript(), чтобы также получить jQueryUI и поместить предупреждение в функцию, вызываемую из обратного вызова. Я столкнулся с проблемой создания вкладки (элемент № 5 в приведенном выше вопросе) из-за этой причуды.

Ссылка: http://api.jquery.com/append/
Поиск Карла Сведберга, говорящего "Да, это нормально"

2) Firebug, похоже, использует "$" в консоли, что приводит к ситуации, подобной моему описанию выше, где "$" не работает, но jQuery () работает. Кажется, есть некоторые правила, регулирующие, когда он выпускает «$», потому что, если я просто попробую запустить скрипт снова, ярлык $ jQuery внезапно сработает. Это была самая расстраивающая часть, потому что она выглядела как проблема объема и / или времени!

...