代码之家 › 专栏 › 技术社区 › Dr. Frankenstein

jquery-通过AJAX加载内联javascript

jquery testing ajax javascript

Dr. Frankenstein · 技术社区 · 16 年前

我已经创建了一个快速原型,试图建立一些非常基本的事实,即当内联JavaScript加载AJAX时,它可以做什么:

索引.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加载

<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>

笔记:

b) 我用过 alert 而不是 console.log 作为控制台 undefined 在“加载的”HTML中调用时。

$(document).ready() 不将“加载的”HTML视为新文档,也不重新读取整个DOM树(包括加载的HTML),这在AJAX加载的内容中是毫无意义的
“加载的”HTML中包含的JavaScript可以影响现有DOM节点的样式
不能使用 firebug 在“加载的”HTML内部可以影响现有的DOM(注a)

我从我的测试(测试有效性)中得出这些“真理”是正确的吗?
如果没有,你将如何测试这些?

1 回复 | 直到 16 年前

VoteyDisciple 16 年前

.load() .

关于#1,文档已经加载,因此不,您没有加载一个全新的文档。您只是在已经存在的文档中间添加内容。但是,节点实际上是添加到DOM中的,您要求在其中添加节点。这不需要“重读整个DOM树”,但效果是一样的。

你在#2的观点是正确的:任何注入到页面的JavaScript都会以任何方式影响页面上的任何内容,包括其样式。新加载的脚本无法知道哪些元素以前在那里,哪些是新的;它只看到DOM当前存在的样子。

你在#4上错了。Firebug是分析当前页面内容的绝佳工具,无论它是如何到达页面的。在Firebug中,您总是可以看到当前的DOM,它甚至会高亮显示(黄色)实时进行的任何更改。