使用jQuery load一个目标页面(html,jsp,php等)会显示空白,而直接打开又正常显示的原因
尝试了N种办法,终于找出:
1、存在没有完全成对闭合的HTML标签(如DIV、UL、LI等)
2、加载目标页面可以正常使用JS代码,并被正常加载生效
经过这两天的搜索与验证;网上的人都说生成的目标页面不能包括js或css;或者说目标页面的内容过多显示不出来;
其实这是个错误的认识;
- $("#content").load("receiveList.ftl")
目标文件:receiveList.ftl
- <style type="text/css">
- html, body {
- overflow-y: hidden;
- }
- .innera {
- overflow: auto;
- }
- .m1 td {
- border-bottom: 1px solid #ebebeb;
- }
- table.m1 {
- -width: auto;
- }
- </style>
- <div class="normal_blk overflow_h">
- <h2 class="title">
- <span class="table_normalbg">收件箱<em class="mail_list">(共${paging.totalCount} 封,其中 未读邮件${noReadCount} 封。)</em></span>
- </h2>
- <div class="text">
- <div class="cz_bar overflow_h">
- <div style="margin:7px 173px 0 0;">
- <span class="float_r" style="margin-top:5px;">
- <form>
- <input type="hidden" id="pageCount" value="${pageCount}"/>
- <input type="hidden" id="start" value="${pageCurrent}"/>
- 共[<em>${paging.totalCount}</em>]条纪录
- 第[<em>${pageCurrent}</em>]页
- 共[<em>${pageCount}</em>]页
- <#if pageCurrent gt 1 >
- <a href="javascript:page(1);">首页</a>
- </#if>
- <#if pageCurrent gt 1 && (pageCount>=pageCurrent)>
- <a href="javascript:page(${pageCurrent-1});" class="blue">上一页</a>
- </#if>
- <#if (pageCurrent+1)<=pageCount>
- <a href="javascript:page(${pageCurrent+1});" class="blue">下一页</a>
- </#if>
- <#if pageCount!=pageCurrent>
- <a href="javascript:page(${pageCount});" class="blue">尾页</a>
- </#if>
- 跳到
- <input type="text" name="index" size=3 οnkeyup="checkInput(event);" value='${pageCurrent}'>页
- <a href="javascript:void(0);" οnclick="page(document.forms[0].index.value)" class="blue"><b>GO!</b></a>
- </form>
- </span>
- <span style="float:left">
- <div class="fl_l">
- <input type="button" value="删除" id="btn_delete" οnclick="deleteEmail();"/><input type="button" value="彻底删除" id="btn_sure_delete" οnclick="sureDeleteEmail();"/>
- <input type="button" value="转发" οnclick="email_forward();"/>
- <select οnchange="moveTo(this.value)">
- <option>移动到...</option>
- <option value="emailDraft">草稿箱</option>
- <option value="emailSend">发件箱</option>
- </select></div>
- </div>
- </span>
- </div>
- <div class="overflow_h">
- <@property name="comeGo"/>
- </div>
- <div style="margin-right:174px; -margin-right:171px;">
- <div class="overflow_h">
- <div class="outer">
- <table >
- <thead>
- <tr>
- <th style="width:30px;">
- <span class="r_line"><input type="checkbox" οnclick="checkMainBox();" id="maincheckbox"/></span>
- </th>
- <th style="width:44px;"><span class="r_line"></span></th>
- <th style="width:138px;"><span class="r_line">发件人</span></th>
- <th style="width:629px;"><span class="r_line">主题</span></th>
- <th style="width:138px;"><span class="r_line" style="background:none;">时间</span></th>
- </tr>
- </thead>
- </table>
- <div class="innera" id="innera">
- <table id="Table1" class="m1">
- <tbody>
- <#if paging.data ??>
- <#list paging.data as c>
- <tr class="demo3 unload" id="tr${c.docId}" οnmοuseοver="">
- <td style="width:30px;">
- <input type="checkbox" name="subcheckboxs" value="${c.docId}" />
- </td>
- <td style="width:44px;"><img src="<@$img.prototype file="mail_black.gif"/>"/>
- <img src="<@$img.prototype file="Attachment.gif"/>"/></td>
- <td style="width:138px;">
- <a href="javascript:void(0);" οnclick="read(${c.docId});" title="${c.docSubject?default('')}">
- <#if (c.docSubject ??)&&(c.docSubject?length gt 15)>
- ${c.docSubject?substring(0,15)}
- <#else >
- ${c.docSubject?default('')}
- </#if>
- </a>
- <input type="hidden" id="docSubject${c.docId}" value="${c.docSubject?default('')}" />
- </td>
- <td style="width:629px;">
- <a href="javascript:void(0);" οnclick="read(${c.docId});">
- <#if (c.docName ??)&&(c.docName?length gt 35)>
- ${c.docName?substring(0,35)}
- <#else >
- ${c.docName?default('')}
- </#if>
- </a></td>
- <td style="width:138px;">${c.createdate?string('yyyy-MM-dd')} </td>
- </tr>
- </#list>
- <#else>
- <tr class="demo3 unload">
- <td colspan="5">暂时邮件</td>
- </tr>
- </#if>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script language="javascript" type="text/javascript">
- function page(index)
- {
- if(index == "")
- {
- alert("请输入跳转的页面数!");
- return;
- }
- // if(isNaN(document.forms[0].index.value))
- // {
- // alert("跳转页面必须为数值型");
- // return;
- // }
- if(index == 0)
- {
- index = 1;
- }
- if(index > ${pageCount})
- index = "" + ${pageCount};
- doLoad("${componentPath}/email-receive?start=" + index,"content");
- }
- function checkInput(event)
- {
- var currKey = 0
- var e = event || e;
- currKey = e.keyCode || e.which || e.charCode;
- if(currKey == 13)
- {
- page(document.forms[0].index.value);
- /// return;
- }
- else if((currKey >= 48 && currKey <= 57) || (currKey >= 96 && currKey <= 105) ||
- currKey == 8 || currKey == 37 || currKey == 39 || currKey == 127)
- {
- }
- }
- function doing(){
- alert("doing");
- $(".m1 tr:even").addClass("tdOdd");
- //$("th:first").css("background","");//首个
- $(".m1 tr").mouseover(
- function()
- {
- $(this).addClass("tdOver");
- }).mouseout(
- function()
- {
- $(this).removeClass("tdOver");
- }).click(function()
- {//荧光棒
- $(".tdClick").removeClass("tdClick");
- $(this).addClass("tdClick");
- alert(this.id);
- docomeGo(this.id);//处理loadcomeGo
- })//行锁定
- }
- alert(1);
- doing();
- window.οnlοad=function(){
- alert(2);
- }
- </script>
上面的目标文件很长了,也包括着js了;一样在ie8,和ff浏览器正常显示。