jQuery加载（load、get、post）页面显示空白原因

 使用jQuery  load一个目标页面(html,jsp,php等)会显示空白，而直接打开又正常显示的原因

尝试了N种办法，终于找出：

1、存在没有完全成对闭合的HTML标签（如DIV、UL、LI等）

2、加载目标页面可以正常使用JS代码，并被正常加载生效

 

经过这两天的搜索与验证；网上的人都说生成的目标页面不能包括js或css；或者说目标页面的内容过多显示不出来；

其实这是个错误的认识；

 

Java代码   

1. $("#content").load("receiveList.ftl")  

 

 目标文件：receiveList.ftl

Ftl代码   

1. <style type="text/css">  
2.     html, body {  
3.         overflow-y: hidden;  
4.     }  
5.   
6.     .innera {  
7.         overflow: auto;  
8.     }  
9.   
10.     .m1 td {  
11.         border-bottom: 1px solid #ebebeb;  
12.     }  
13.   
14.     table.m1 {  
15.         -width: auto;  
16.   
17.     }  
18. </style>  
19. <div class="normal_blk overflow_h">  
20.     <h2 class="title">  
21.         <span class="table_normalbg">收件箱<em class="mail_list">(共${paging.totalCount} 封，其中 未读邮件${noReadCount} 封。)</em></span>  
22.     </h2>  
23.   
24.     <div class="text">  
25.         <div class="cz_bar overflow_h">  
26.             <div style="margin:7px 173px 0 0;">  
27.           <span class="float_r" style="margin-top:5px;">  
28.               <form>  
29.                   <input type="hidden" id="pageCount" value="${pageCount}"/>  
30.                   <input type="hidden" id="start" value="${pageCurrent}"/>  
31.                   共[<em>${paging.totalCount}</em>]条纪录  
32.                   第[<em>${pageCurrent}</em>]页&nbsp;  
33.                   共[<em>${pageCount}</em>]页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
34.               <#if pageCurrent gt 1 >  
35.                   <a href="javascript:page(1);">首页</a>  
36.   
37.               </#if>  
38.               <#if pageCurrent gt 1 && (pageCount>=pageCurrent)>  
39.                   <a href="javascript:page(${pageCurrent-1});" class="blue">上一页</a>  
40.               </#if>  
41.   
42.               <#if  (pageCurrent+1)<=pageCount>  
43.                   <a href="javascript:page(${pageCurrent+1});" class="blue">下一页</a>  
44.               </#if>  
45.   
46.               <#if pageCount!=pageCurrent>  
47.                   <a href="javascript:page(${pageCount});" class="blue">尾页</a>  
48.               </#if>  
49.                   &nbsp;&nbsp;&nbsp;跳到  
50.                   <input type="text" name="index" size=3 οnkeyup="checkInput(event);" value='${pageCurrent}'>页  
51.                   <a href="javascript:void(0);" οnclick="page(document.forms[0].index.value)" class="blue"><b>GO!</b></a>  
52.               </form>  
53. </span>  
54.   
55.           <span style="float:left">  
56.            <div class="fl_l">  
57.                <input type="button" value="删除" id="btn_delete" οnclick="deleteEmail();"/><input type="button" value="彻底删除" id="btn_sure_delete" οnclick="sureDeleteEmail();"/>  
58.                <input type="button" value="转发" οnclick="email_forward();"/>  
59.                <select οnchange="moveTo(this.value)">  
60.                    <option>移动到...</option>  
61.                    <option value="emailDraft">草稿箱</option>  
62.                    <option value="emailSend">发件箱</option>  
63.                </select></div>  
64.             </div>  
65.             </span>  
66.         </div>  
67.         <div class="overflow_h">  
68.   
69.              <@property name="comeGo"/>  
70.          </div>  
71.             <div style="margin-right:174px; -margin-right:171px;">  
72.                 <div class="overflow_h">  
73.                     <div class="outer">  
74.                         <table  >  
75.                             <thead>  
76.                             <tr>  
77.                                 <th style="width:30px;">  
78.                                     <span class="r_line"><input type="checkbox" οnclick="checkMainBox();" id="maincheckbox"/></span>  
79.                                 </th>  
80.                                 <th style="width:44px;"><span class="r_line"></span></th>  
81.                                 <th style="width:138px;"><span class="r_line">发件人</span></th>  
82.                                 <th style="width:629px;"><span class="r_line">主题</span></th>  
83.                                 <th style="width:138px;"><span class="r_line" style="background:none;">时间</span></th>  
84.                             </tr>  
85.                             </thead>  
86.                         </table>  
87.                         <div class="innera" id="innera">  
88.                             <table id="Table1" class="m1">  
89.                                 <tbody>  
90.                                 <#if paging.data ??>  
91.                                     <#list paging.data as c>  
92.   
93.                                     <tr class="demo3 unload" id="tr${c.docId}" οnmοuseοver="">  
94.                                         <td style="width:30px;">  
95.                                             <input type="checkbox" name="subcheckboxs" value="${c.docId}" />  
96.                                         </td>  
97.                                         <td style="width:44px;"><img src="<@$img.prototype file="mail_black.gif"/>"/>  
98.                                             <img src="<@$img.prototype file="Attachment.gif"/>"/></td>  
99.                                         <td style="width:138px;">  
100.                                             <a href="javascript:void(0);" οnclick="read(${c.docId});" title="${c.docSubject?default('')}">  
101.                                                 <#if (c.docSubject ??)&&(c.docSubject?length gt 15)>  
102.          ${c.docSubject?substring(0,15)}  
103.             <#else >  
104.                                                 ${c.docSubject?default('')}  
105.                                                 </#if>  
106.                                             </a>  
107.                                          <input type="hidden" id="docSubject${c.docId}" value="${c.docSubject?default('')}"  />  
108.                                         </td>  
109.                                         <td style="width:629px;">  
110.                                             <a href="javascript:void(0);" οnclick="read(${c.docId});">  
111.                                                 <#if (c.docName ??)&&(c.docName?length gt 35)>  
112.         ${c.docName?substring(0,35)}  
113.             <#else >  
114.                                                 ${c.docName?default('')}  
115.                                                 </#if>  
116.                                             </a></td>  
117.                                         <td style="width:138px;">${c.createdate?string('yyyy-MM-dd')} </td>  
118.                                     </tr>  
119.   
120.                                     </#list>  
121.                                     <#else>  
122.                                     <tr class="demo3 unload">  
123.                                         <td colspan="5">暂时邮件</td>  
124.                                     </tr>  
125.                                 </#if>  
126.                                 </tbody>  
127.                             </table>  
128.                         </div>  
129.                     </div>  
130.                 </div>  
131.             </div>  
132.         </div>  
133.     </div>  
134.    
135.   
136. <script language="javascript" type="text/javascript">  
137.     function page(index)  
138.     {  
139.         if(index == "")  
140.         {  
141.             alert("请输入跳转的页面数！");  
142.             return;  
143.         }  
144.     //    if(isNaN(document.forms[0].index.value))  
145.     //    {  
146.      //       alert("跳转页面必须为数值型");  
147.     //        return;  
148.      //   }  
149.         if(index == 0)  
150.         {  
151.             index = 1;  
152.         }  
153.         if(index > ${pageCount})  
154.             index = "" + ${pageCount};  
155.   
156.         doLoad("${componentPath}/email-receive?start=" + index,"content");  
157.     }  
158.   
159.     function checkInput(event)  
160.     {  
161.         var currKey = 0  
162.         var e = event || e;  
163.         currKey = e.keyCode || e.which || e.charCode;  
164.         if(currKey == 13)  
165.         {  
166.             page(document.forms[0].index.value);  
167.             /// return;  
168.         }  
169.         else if((currKey >= 48 && currKey <= 57) || (currKey >= 96 && currKey <= 105) ||  
170.             currKey == 8 || currKey == 37 || currKey == 39 || currKey == 127)  
171.         {  
172.   
173.         }  
174.   
175.     }  
176.      function doing(){  
177.          alert("doing");  
178.       $(".m1 tr:even").addClass("tdOdd");  
179.         //$("th:first").css("background","");//首个  
180.         $(".m1 tr").mouseover(  
181.             function()  
182.             {  
183.                 $(this).addClass("tdOver");  
184.             }).mouseout(  
185.             function()  
186.             {  
187.                 $(this).removeClass("tdOver");  
188.             }).click(function()  
189.             {//荧光棒  
190.                 $(".tdClick").removeClass("tdClick");  
191.                 $(this).addClass("tdClick");  
192.                    alert(this.id);  
193.                       docomeGo(this.id);//处理loadcomeGo  
194.   
195.             })//行锁定  
196.   
197.      }  
198.     alert(1);  
199.      doing();  
200.    window.οnlοad=function(){  
201.   
202.        alert(2);  
203. }  
204.   
205. </script>  

 

上面的目标文件很长了，也包括着js了；一样在ie8,和ff浏览器正常显示。