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

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

页面体会：

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本身的问题

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

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

我的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浏览器内容加载完毕，但进度条加载很慢