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

郁闷国庆几天了，终于查出为何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>]页&nbsp;
                  共[<em>${pageCount}</em>]页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <#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>
                  &nbsp;&nbsp;&nbsp;跳到
                  <input type="text" name="index" size=3 onkeyup="checkInput(event);" value='${pageCurrent}'>页
                  <a href="javascript:void(0);" onclick="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" onclick="deleteEmail();"/><input type="button" value="彻底删除" id="btn_sure_delete" onclick="sureDeleteEmail();"/>
               <input type="button" value="转发" onclick="email_forward();"/>
               <select onchange="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" onclick="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}" onmouseover="">
                                        <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);" onclick="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);" onclick="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.onload=function(){

       alert(2);
}

</script>

 

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

评论

1 楼 skykufo 2015-07-07  

坑爹啊，我也因为写多了一个div，在ie8浪费了一天