jquery - загрузка встроенного JavaScript через AJAX - PullRequest
Новая
       4

jquery - загрузка встроенного JavaScript через AJAX

3 голосов
/ 02 июня 2010

Я собрал быстрый прототип, чтобы попытаться установить несколько очень простых истин, касающихся того, что может делать встроенный JavaScript при загрузке с AJAX:

index.html 

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    </head>
    <body>
            <script type="text/javascript">
                    $('p').css('color','white');
                    alert($('p').css('color'));
                    // DISPLAYS FIRST but is "undefined"

                    $(document).ready(function(){
                        $('#ajax-loaded-content-wrapper').load('loaded-by-ajax.html', function(){
                            $('p').css('color','grey');
                            alert($('p').css('color'));
                            // DISPLAYS LAST (as expected)
                        });
                        $('p').css('color','purple');
                        alert($('p').css('color'));
                        // DISPLAYS SECOND
                    });
            </script>
            <p>Content not loaded by ajax</p>
            <div id="ajax-loaded-content-wrapper">
            </div>
    </body>
</html>

загружен-на-ajax.html * * +1006 <p>Some content loaded by ajax</p> <script type="text/javascript"> $('p').css('color','yellow'); alert($('p').css('color')); // DISPLAYS THIRD $(document).ready(function(){ $('p').css('color','pink'); alert($('p').css('color')); // DISPLAYS FOURTH }); </script> <p>Some content loaded by ajax</p> <script type="text/javascript"> $(document).ready(function(){ $('p').css('color','blue'); alert($('p').css('color')); // DISPLAYS FIFTH }); $('p').css('color','green'); alert($('p').css('color')); // DISPLAYS SIX </script> <p>Some content loaded by ajax</p> Примечания:

a) Все вышеперечисленное (кроме первого) успешно меняет цвет всех абзацев (в Firefox 3.6.3).
б) Я использовал alert вместо console.log, так как консоль undefined при вызове в «загруженном» HTML.

Истины (?):

  1. $(document).ready() не обрабатывает «загруженный» HTML как новый документ и не перечитывает все дерево DOM, включая загруженный HTML, это бессмысленно внутри содержимого, загруженного AJAX
  2. JavaScript, содержащийся внутри «загруженного» HTML, может влиять на стиль существующих узлов DOM
  3. Можно успешно использовать библиотеку jQuery внутри «загруженного» HTML для изменения стиля существующих узлов DOM
  4. Нельзя использовать firebug внутри «загруженного» HTML, который может влиять на существующий DOM (доказано в Note a)

Правильно ли я вывел эти «истины» из моих тестов (валидность теста)?
Если нет, то как бы вы проверили их?

1 Ответ

2 голосов
/ 02 июня 2010

Мы можем сузить его до одной еще более простой истины: все, что делает функция .load(), это добавляет контент на вашу страницу .

Что касается # 1, документ уже загружен,так что нет, вы не загружаете совершенно новый документ.Вы просто добавляете контент в середине документа, который уже там.Тем не менее, узлы действительно добавляются в DOM, где вы просили их добавить.Это не требует «перечитывания всего дерева DOM», но эффект тот же.

Вы верны на # 2: любой JavaScript, который вы вставляете на свою страницу, может абсолютно повлиять на что-либо на вашей странице в любомКстати, включая его стили.Вновь загруженные скрипты не имеют возможности узнать, какие элементы были там раньше, а какие новые;он просто видит DOM в том виде, в каком он существует в данный момент.

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

Вы ошиблись в # 4.Firebug - это фантастический инструмент для анализа того, что в данный момент находится на странице, независимо от того, как оно туда попало.Вы всегда будете видеть текущий DOM в Firebug, и он даже выделит (желтым цветом) любые изменения, сделанные в реальном времени.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...