tab选项卡中使用的iframe，如果包含大量数据，切换卡顿问题解决办法。

jun_bai

已于 2022-10-17 11:49:21 修改

阅读量1.2k

点赞数 1

文章标签：前端 javascript 开发语言

于 2022-10-17 11:45:06 首次发布

本文链接：https://blog.csdn.net/jun_bai/article/details/127360576

版权

所有前端UI框架的TAB选项卡功能，基本都是靠display来控制切换，我的一个项目需要，其中一个选项卡中使用iframe包含的页中数据量比较大，在点击TAB选项卡时十分卡顿，而且iframe页内的滚动条，每次都会回到顶部。研究了很久终于发现是iframe的问题，如果display=none的内容中包含iframe则会重新载入。所以改用其他方式控制iframe的显示与隐藏，经过多种尝试发现z-index的方式最稳定可靠。贴出代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta XXhttp-equiv="X-UA-Compatible"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-control" content="no-cache"/>
<meta http-equiv="Cache" content="no-cache"/>
<style type="text/css">
  html,body{  height: 100%;  }
  *{  
    margin: 0;   
    padding: 0;  
  }
  html,body{ width:100%;height:100%;} 
  body ,td ,input ,div{ font-family: "Microsoft Yahei","微软雅黑",STHeiti,"华文细黑",Helvetica,Arial,"Hiragino Sans GB",sans-serif;font-size: 14px; }
  a  { text-decoration: none; color: #000000 }
  a:hover  { text-decoration: underline; color:#FF6600 } 
</style>
<style> 
.myIframe { height:calc(100% - 40px); }
.outFrame { z-index:0;}
.inFrame  { z-index:1;}
.outMyNav { cursor:pointer;padding:3px;border-bottom:2px solid #F4F4F4 !important; color:#000000 !important;  }
.inMyNav  { cursor:pointer;padding:3px;border-bottom:2px solid #1e95cd !important; color:#1e95cd !important;  }
</style> 
</head> 
<body cellspacing="0" cellpadding="0" height="100%" scroll=no style='overflow:hidden;' > 
<table width='100%' height='100%' border=0>
<tr>
  <td bgcolor='FFFFFF'><table id='mycmfNav'><tr></tr></table></td>
</tr>
<tr>
  <td valign=top height="100%" id='mycmfFrame'></td>
</tr>
</table>
</body>
</html>   
<script>
    var currTab = "";
    function addTab(tit, idd , ur ){
    	  //alert(idd);
    	  addTabNav(tit, idd);
    	  addTabFrame(tit , idd, ur);    
    	  Tabto(idd);
    }
    function Tabto(idd){
    	 //含iframe的页面使用display来控制显示，如果包含数据量大的表格，十分卡顿而且每次显示都会滚动到顶部。改用设置z-index的方式，则切换100%丝滑。
    	 try{ document.getElementById("myNav"+currTab+"Nav").className = "outMyNav"; }catch(e){ } 
    	 try{ document.getElementById("myFrame"+currTab).className     = "outFrame"; }catch(e){ }
    	 try{ document.getElementById("myFrame"+idd).className         = "inFrame"; }catch(e){ }
    	 try{ document.getElementById("myNav"+idd+"Nav").className     = "inMyNav"; }catch(e){ }
    	 currTab = idd ;
    }
    function Tabdel(idd){
    	try{ document.getElementById("myNav"+idd+"Nav").remove(); }catch(e){ }
    	try{ document.getElementById("myFrame"+idd+"").remove(); }catch(e){ }
    }
    function addTabNav(tit, idd){
    	  var Table = document.getElementById("mycmfNav");  //取得自定义的表对象
	      var rowLength = Table.rows.length;  //行數量
	      var cellLength=Table.rows[0].cells.length; //查找單元格数量
	      var NewCell= Table.rows[0].insertCell(cellLength);
	      var nt = "<table ondragstart='return false;' onselectstart='return false;' >";
	          nt = nt + "<tr>";
	          nt = nt + "<td onclick=\"Tabto('"+idd+"');\" style='white-space:nowrap;'>"+tit+"</td>";
	          nt = nt + "<td onclick=\"Tabdel('"+idd+"');\"><font color=cccccc>x</td>";
	          nt = nt + "</tr>";
	          nt = nt + "</table>";
	          NewCell.id = "myNav"+idd+"Nav";    
	          NewCell.innerHTML = "" + nt ; 
    }
    
    function addTabFrame(tit, idd , ur){
  	         var Table = document.getElementById("mycmfFrame");  //取得自定义的表对象
	         var nt = "<div id='myFrame"+idd+"' style='position:absolute;background:#FFFFFF;width:100%;height:100%;'><iframe class='myIframe' border=0 frameborder=0  width='100%' height='100%' src='"+ur+"'></iframe></div>";
	         Table.innerHTML = Table.innerHTML + nt ;  
    }
    
	function urlTab(tit , idd , ur){
		     var Nav = document.getElementById("mycmfNav").innerHTML;  //取得自定义的表对象
		     if(Nav.indexOf("myNav"+idd+"Nav")<1){
		       addTab(tit , idd , ur );
		     }else{
		       Tabto(idd);
		     }
			 return true ;
	} 
</script>

jun_bai

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
tab选项卡中使用的iframe，如果包含大量数据，切换卡顿问题解决办法。

所有前端UI框架的TAB选项卡功能，基本都是靠display来控制切换，我的一个项目需要，其中一个选项卡中使用iframe包含的页中数据量比较大，在点击TAB选项卡时十分卡顿，而且iframe页内的滚动条，每次都会回到顶部。研究了很久终于发现是iframe的问题，如果display=none的内容中包含iframe则会重新载入。所以改用其他方式控制iframe的显示与隐藏，经过多种尝试发现z-index的方式最稳定可靠。
复制链接

扫一扫