Javascript动态加载Html元素到页面Dom文档结构时执行顺序的不同

我们有时会通过ajax动态获取一段Html代码，并且将这段代码通过javascript放到页面的Dom结构中去。而很多时候通过ajax动态获取的Html代码中也包含javascript代码，有一点需要注意的是 通过ajax动态加载Html元素到页面Dom 和 浏览器访问页面时加载页面Dom 时javascript的执行顺序是有所不同的。

我们先来看一个Html页面的代码，这个页面会通过ajax去Web服务器获取一段Html代码片段并通过javascript加载到页面的Dom结构中去，我们把这个Html页面在本文中称作主页面:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta charset="utf-8" />
 6     <script type="text/javascript" src="Scripts/jquery.js"></script>
 7     <script type="text/javascript">
 8         alert("Main_1>>" + "主页面script标签开始加载");
 9 
10         alert("Main_2>>" + ($("#htmlContainer").length > 0 ? "主页面找到htmlContainer" : "主页面未找到htmlContainer"));
11 
12         $(function () {
13             alert("Main_4>>" + "主页面document.ready执行");
14             alert("Main_5>>" + ($("#htmlContainer").length > 0 ? "主页面找到htmlContainer" : "主页面未找到htmlContainer"));
15 
16             $.ajax({
17                 url: "PartialHtmlPage.html",
18                 data: null,
19                 type: "GET",
20                 contentType: "text/html",
21                 success: function (result) {
22                     alert("Main_6>>" + "主页面ajax已经获取到部分页html代码，开始加载部分页的html代码到主页面dom结构");
23                     $("#htmlContainer").html(result);
24                     alert("Main_7>>" + "主页面加载部分页html代码到主页面dom结构完毕");
25                 },
26                 error: function (result) {
27                     alert(result.statusText);
28                 }
29             });
30         })
31 
32         alert("Main_3>>" + "主页面script标签加载完毕");
33     </script>
34 </head>
35 <body>
36     <div id="htmlContainer">
37 
38     </div>
39 </body>
40 </html>

我们在页面中的一些关键位置用alert打出了一些信息以表示当前页面执行到什么地方了，并通过数字标注了alert执行时的顺序。我们执行页面后会发现在主页面中，当用浏览器去访问页面通过常规方式加载页面Dom结构时，上面代码中执行到script标签时，script标签下的Html元素都还没有加载到Dom结构里面去，因为上面第10行代码显示的是 主页面未找到htmlContainer 。而且jquery中的document.ready事件是在整个页面的Dom结构生成完毕后才会被执行，因为第14行代码显示的是 主页面找到htmlContainer ，并且第13行代码要后于32行代码执行，说明当执行到13行代码的时候，整个页面的Html标签都已经加载完毕了。

我们再来看看主页面ajax方法获取到的Html代码片段（PartialHtmlPage.html），我们把Html代码片段在本文中称作部分页：

 1 <script type="text/javascript">
 2     alert("Partail_1>>"+"部分页script标签开始加载");
 3     alert("Partail_2>>" + ($("#partialPageDiv").length > 0 ? "部分页找到partialPageDiv" : "部分页未找到partialPageDiv"));
 4 
 5     $(function () {
 6         alert("Partail_3>>" + "部分页document.ready执行");
 7     });
 8 
 9     alert("Partail_4>>" + "部分页script标签加载完毕");
10 </script>
11 <div id="partialPageDiv">
12     测试div，看使用ajax动态加载html到页面dom里面时，js是否能够找到这个div
13 </div>

上面部分页的代码会在主页面第23行代码被加载到主页面Dom结构中去，大家可以观察下部分页alert弹出信息的顺序，我们来看看和主页面加载Dom结构时有什么不同。当执行到部分页的script标签时，script标签下的Html元素都已经被加载到Dom结构里面去了，因为上面部分页第3行代码显示的是 部分页找到partialPageDiv 。部分页中jquery的document.ready事件在部分页的Dom结构生成完毕前就被执行了，因为上面部分页第6行代码要先于第9行代码执行，实际上在部分页中调用 $(function () {})时里面的function就被立即执行了，而不是像主页面一样要等整个页面的Dom结构加载完毕后才执行。

请大家通过javascript动态获取Html片段加载到页面Dom结构时要注意上面两个问题，否则很容易引起一些不必要的Bug。

Javascript动态加载Html元素到页面Dom文档结构时执行顺序的不同

相关推荐