学步园

项目中，有一个页面出现了如下的状况：

页面体会：

      IE浏览器内容加载完毕，但进度条加载很慢/IE进度条一直loading总处于未完成状态

      并且，“栏目树”按钮点击后需较长时间的停顿后才显示树状结构(IE6/IE7停顿明显，FireFox速度正常)

代码排查：

 通过对弹出窗体——“栏目树”窗体代码的检查，发现：

       “栏目树”窗体中含有2个iframe，其中有一个作为树状结构的容器(src 属性从servlet获取树形结构数据)，另外一个暂时未用。

问题解决：

      注释掉暂时无用的iframe——页面仅仅保留树状结构所在iframe。

修改后的效果：

      树形结构显示流畅。

百度了下，有如下几篇文章不错，copy下来，以备温故知新。

关于IE进度条的问题

url：http://topic.csdn.net/t/20051031/17/4362120.html

问题：

现在遇到一个头痛的问题，一个jsp页面，当打开它时，也正常现实，一切都正常，只是下面的IE进度条每当打开这个页面时就一直处于未结束状态，而实际上页面的内容早已经显示完毕了，请问有哪几种可能会导致进度条始终处于读取状态呢

问题分析、解决：

找到原因了！！原因太隐蔽了，就是当有上下两个frame,上frame刷新下frame时，必须上frame也必须强制刷新一下，即使上frame没有任何变化，不然的话进度条就一直在等。

===================================================================

页面包含iframe后，浏览器进度条一直loading

url:http://www.khgl.cn/html/02/n-541702.html

问题陈述：

我页面里面有个iframe，页面加载进来后，   这个iframe的内容也出来了

问题解决：

应该是iframe的原因
我把iframe这句删去   就没事了
而且页面里也没其他东西了

我页面里面有个table
<table   width= "100% "   border= "0 "   cellpadding= "1 "   cellspacing= "0 ">
<tr>
<td   valign= "top "   class=bg1>
<iframe   name= "frame "   border=0   frameborder=0   framespacing=0   width=100%   height=326   marginheight=0   marginwidth=0   noResize   scrolling=auto
src= http://topic.csdn.net/u/20070405/16/"sysmyyh.do?method=LoadForSysYhQx "   vspale= "0 "
allowTransparency= "true ">
</iframe>
</td>
</tr>
</table>

我把其他的东西都删了还是有这个问题
但我把iframe标签删了后，就好了
我相信是iframe本身的问题

那是相当多列<br /> js部分 </p> <p><mce:script language= "javascript "><!--</p> <p>var second;<br /> var three;<br /> //三级checkbox点击事件<br /> function selectAll(value, index){<br /> var check = document.all.check; </p> <p>var flag = true; </p> <p>for (var i = 0; i < check.length; i++){<br /> if (check[i].second == value){<br /> if (check[i].checked == false){<br /> flag = false;<br /> second = check[i].second;<br /> three = check[i].three;<br /> }<br /> else{<br /> second = value;<br /> three = index;<br /> }<br /> }<br /> } </p> <p>//二级checkbox<br /> if (flag){<br /> for (var i = 0; i < check.length; i++){<br /> if (check[i].first == second){<br /> check[i].checked = true;<br /> }<br /> }<br /> }<br /> else{<br /> for (var i = 0; i < check.length; i++){<br /> if (check[i].first == second){<br /> check[i].checked = false;<br /> }<br /> }<br /> } </p> <p>//一级checkbox<br /> flag = true; </p> <p>for (var i = 0; i < check.length; i++){<br /> if (check[i].second == three){<br /> if (check[i].checked == false){<br /> flag = false;<br /> }<br /> }<br /> } </p> <p>if (flag){<br /> for (var i = 0; i < check.length; i++){<br /> if (check[i].first == three){<br /> check[i].checked = true;<br /> }<br /> }<br /> }<br /> else{<br /> for (var i = 0; i < check.length; i++){<br /> if (check[i].first == three){<br /> check[i].checked = false;<br /> }<br /> }<br /> } </p> <p>} </p> <p>//二级功能组点击事件<br /> function expanded(table,img){<br /> var tr = document.getElementById(table).getElementsByTagName( "tr ");<br /> var objImg = document.getElementById(img);<br /> for (var i = 0; i < tr.length; i++){<br /> if (tr[i].three != " " && tr[i].three != undefined){<br /> var close = tr[i].style.display;<br /> if (close == "none "){<br /> objImg.src = "${ctx }/image/tree/dot2_2.gif ";<br /> tr[i].style.display = " ";<br /> }<br /> else{<br /> objImg.src = "${ctx }/image/tree/dot1_1.gif ";<br /> tr[i].style.display = "none ";<br /> }<br /> } </p> <p>} </p> <p> } </p> <p>//一级功能组点击事件<br /> function expand(table,img){<br /> var tr = document.getElementById(table).getElementsByTagName( "tr ");<br /> var objImg = document.getElementById(img); </p> <p>for (var i = 0; i < tr.length; i++){<br /> if (tr[i].three == " "){<br /> var close = tr[i].style.display; </p> <p>if (close == "none "){<br /> objImg.src = "${ctx }/image/tree/dot2_2.gif ";<br /> tr[i].style.display = " ";<br /> }<br /> else{<br /> objImg.src = "${ctx }/image/tree/dot1_1.gif ";<br /> tr[i].style.display = "none ";<br /> }<br /> }<br /> }<br /> } </p> <p>//一级checkbox点击事件<br /> function checkExpanded(obj, checkbox, table, img){<br /> var objBox = document.all.check; </p> <p>//change二级和三级checkbox<br /> for (var i = 0; i < objBox.length; i++){<br /> if ((objBox[i].second == checkbox) || (objBox[i].three == checkbox)){<br /> if (obj.checked){<br /> objBox[i].checked = true;<br /> }<br /> else{<br /> objBox[i].checked = false;<br /> }<br /> }<br /> } </p> <p>var arr = new Array();<br /> var index = 0;<br /> if (obj.checked){<br /> //展开其下的内容<br /> var tr = document.getElementById(table).getElementsByTagName( "tr ");<br /> var objImg = document.getElementById(img); </p> <p>for (var i = 0; i < tr.length; i++){<br /> if (tr[i].second == checkbox){<br /> objImg.src = "${ctx }/image/tree/dot2_2.gif ";<br /> tr[i].style.display = " ";<br /> arr[index] = tr[i].first;<br /> index++;<br /> }<br /> if (tr[i].three == checkbox){<br /> objImg.src = "${ctx }/image/tree/dot2_2.gif ";<br /> tr[i].style.display = " ";<br /> }<br /> } </p> <p>for (var j = 0; j < arr.length; j++){<br /> for (var i = 0; i < objBox.length; i++){<br /> if (objBox[i].first == arr[j]){ </p> <p>document.getElementById(objBox[i].imgindex).src = "${ctx }/image/tree/dot2_2.gif ";<br /> }<br /> }<br /> }<br /> } </p> <p>} </p> <p>var father;<br /> //二级checkbox点击事件<br /> function checkExpand(obj, checkbox, index, table, img){<br /> var objBox = document.all.check; </p> <p>for (var i = 0; i < objBox.length; i++){<br /> if (objBox[i].second == checkbox){<br /> if (obj.checked){<br /> objBox[i].checked = true;<br /> }<br /> else{<br /> objBox[i].checked = false;<br /> }<br /> }<br /> } </p> <p>var check = document.all.check; </p> <p>var flag = true; </p> <p>for (var i = 0; i < check.length; i++){<br /> if (check[i].second== index){<br /> if (check[i].checked == false){<br /> flag = false;<br /> father = check[i].second;<br /> }<br /> else{<br /> father = index;<br /> }<br /> }<br /> } </p> <p>if (flag){<br /> for (var i = 0; i < check.length; i++){<br /> if (check[i].first == father){<br /> check[i].checked = true;<br /> }<br /> }<br /> }<br /> else{<br /> for (var i = 0; i < check.length; i++){<br /> if (check[i].first == father){<br /> check[i].checked = false;<br /> }<br /> }<br /> } </p> <p>if (obj.checked){<br /> //展开其下的内容<br /> var tr = document.getElementById(table).getElementsByTagName( "tr ");<br /> var objImg = document.getElementById(img);<br /> for (var i = 0; i < tr.length; i++){<br /> if (tr[i].second == checkbox){<br /> objImg.src = "${ctx }/image/tree/dot2_2.gif ";<br /> tr[i].style.display = " ";<br /> }<br /> }<br /> } </p> <p>}<br /> // --></mce:script><br /> ---------回复--------------<br /> html部分 </p> <p><body leftmargin= "0 " topmargin= "0 " marginwidth= "0 " marginheight= "0 "><br /> <table width= "100% " border= "0 " cellpadding= "6 " cellspacing= "0 " class=bg1><br /> <tr><br /> <td> <c:forEach var= "qxfirst " items= "${qxlist } " varStatus= "s "><br /> <c:if test= "${ qxfirst.kind == 't ' } "><br /> <table width= "100% " border= "0 " cellpadding= "1 " cellspacing= "0 "><br /> <tr><br /> <td><br /> <table width= "100% " border= "0 " cellpadding= "0 " cellspacing= "0 "<br /> id= "table${s.index } "><br /> <tr><br /> <td><br /> <table width= "100% " border= "0 " cellpadding= "0 " cellspacing= "0 "> </p> <p><tr><br /> <td width= "11 " align= "right "> <img id= "img${s.index} "<br /> src= http://topic.csdn.net/u/20070405/16/"../image/tree/dot1_1.gif " width= "9 " height= "9 "<br /> onClick= "expand( 'table${s.index} ', 'img${s.index} ') "> </td><br /> <td>   <input name= "check " type= "checkbox " id= "first "<br /> first= "check${s.index } " second= " " three= " "<br /> onClick= "checkExpanded(this, 'check${s.index} ', 'table${s.index } ', 'img${s.index } ') "<br /> value= "${qxfirst.value } "> <span class= "STYLE1 "> ${qxfirst.name<br /> } </span> </td><br /> </tr> </p> <p></table><br /> </td><br /> </tr> </p> <p><c:forEach var= "qxsecond " items= "${qxlist } " varStatus= "t "><br /> <c:choose><br /> <c:when test= "${qxsecond.parent == qxfirst.value } "><br /> <tr first= "check${t.index } " second= "check${s.index } "<br /> three= " " style= "display:none "><br /> <td> </p> <p><table width= "100% " border= "0 " cellpadding= "0 "<br /> id= "table${t.index } " cellspacing= "0 "><br /> <tr align= "left "><br /> <td align=right> <img src= http://topic.csdn.net/u/20070405/16/"../image/tree/xx002_1.gif "<br /> width= "12 " height= "17 "> </td><br /> <td align= "left "><br /> <table width= "100% " border= "0 " cellpadding= "0 "<br /> cellspacing= "0 "> </p> <p><tr><br /> <td width= "11 " align= "right "> <img id= "img${t.index} "<br /> src= http://topic.csdn.net/u/20070405/16/"../image/tree/dot1_1.gif " width= "9 " height= "9 "<br /> onClick= "expanded( 'table${t.index} ', 'img${t.index} ') "> </td><br /> <td width= "7 "> <img<br /> src= http://topic.csdn.net/u/20070405/16/'../image/three/xx004_1.gif_1.gif " ' width= "7 "<br /> height= "1 "> </td><br /> <td> <input name= "check " id= "second "<br /> first= "check${t.index } " second= "check${s.index } "<br /> three= " " type= "checkbox " imgindex= "img${t.index } "<br /> onClick= "checkExpand(this, 'check${t.index} ', 'check${s.index } ', 'table${t.index } ', 'img${t.index } ') "<br /> value= "${qxsecond.value } "> <span> ${qxsecond.name } </span> </td><br /> </tr> </p> <p></table><br /> </td><br /> </tr><br /> <c:forEach var= "qxthree " items= "${qxlist } " varStatus= "m "><br /> <c:choose><br /> <c:when test= "${qxthree.parent == qxsecond.value} "><br /> <tr first= "check${m.index } " second= "check${t.index } "<br /> three= "check${s.index } " style= "display:none "><br /> <td colspan= "2 "> </p> <p><table width= "80% " border= "0 " cellspacing= "0 "<br /> cellpadding= "0 " align= "right "><br /> <tr><br /> <td width= "18 " align= "right "> <img<br /> src= http://topic.csdn.net/u/20070405/16/"../image/tree/xx002_1.gif " width= "12 "<br /> height= "17 "> </td><br /> <td align= "left "><br /> <table width= "100% " border= "0 " cellpadding= "0 "<br /> cellspacing= "0 "><br /> <tr><br /> <td width= "11 " align= "right "> <img<br /> src= http://topic.csdn.net/u/20070405/16/"../image/tree/dot2_2.gif " width= "9 " height= "9 "> </td><br /> <td width= "7 "> <img<br /> src= http://topic.csdn.net/u/20070405/16/'../image/three/xx004_1.gif.gif " ' width= "7 "<br /> height= "1 "?> </td><br /> <td> <input name= "check " second= "check${t.index } "<br /> first= "check${m.index } " three= "check${s.index } "<br /> type= "checkbox " value= "${qxthree.value } "<br /> onclick= "selectAll( 'check${t.index } ', 'check${s.index } ') "><br /> ${qxthree.name } </td><br /> </tr><br /> </table><br /> </td><br /> </tr><br /> </table> </p> <p></td> </p> <p></tr><br /> </c:when><br /> </c:choose><br /> </c:forEach> </p> <p></table> </p> <p></td><br /> </tr><br /> </c:when> </p> <p></c:choose><br /> </c:forEach> </p> <p></table><br /> </td><br /> </tr> </p> <p></table><br /> </c:if><br /> </c:forEach> </td><br /> </tr><br /> </table><br /> </body><br /> ---------回复--------------<br /> 我iframe中显示的是个树<br /> 应该没有关系<br /> ---------回复--------------<br /> 晕了，帖这么多JSTL的代码，应该也不会是JSTL这部分的，要不你试试是不是你的浏览器的问题，换其他人试下，你的那个IFRAME外面看不出来，<br /> <table width= "100% " border= "0 " cellpadding= "1 " cellspacing= "0 "><br /> <tr><br /> <td valign= "top " class=bg1><br /> <iframe name= "frame " border=0 frameborder=0 framespacing=0 width=100% height=326 marginheight=0 marginwidth=0 noResize scrolling=auto<br /> src= http://topic.csdn.net/u/20070405/16/"http://www.baidu.com " vspale= "0 "<br /> allowTransparency= "true "><br /> </iframe><br /> </td><br /> </tr><br /> </table><br />

---------回复--------------
不是浏览器的问题
我试过
得说一下

我的index.jsp中包含两个iframe(a.do,   b.do)
然后b.do后跳转到b.jsp,     b.jsp中又包含一个iframe,  
我上面所说的页面就是指b.jsp。  
 
不知道这样两次套用是不是问题的原因
---------回复--------------
刚才在网上狂查
终于找到了是怎么回事
把结果帖出来，   大家看看

是因为我iframe页面中又套用了iframe
这种操作就相当于 2个frame数据的同时更新,
导致IE无法判断是否装载完成

我在b.jsp页面里加了句
setTimeout( "document.all.frame.src= http://topic.csdn.net/u/20070405/16/'system.do?method=LoadForSys ' ",   1);
就好了。

===================================================================

用iframe做Tab页的内存泄漏问题以及进度条问题,急急急...

http://group.gimoo.net/review/136180

在系统中自己用iframe做了个Tab页，到测试的时候才发现。javascript频繁的操作iframe的时候导致内存泄漏，还有就是在插入的iframe的src链接返回的页面中如果包括iframe或者jsp:include，则sp3系统的IE浏览器内容加载完毕，但进度条加载很慢