先看个效果图: Html页面代码: <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > < html > < head > < title > create iframe </ title > < link href ="baseStyle.css" type ="text/css" rel ="stylesheet" > < script language ="JavaScript" > ... <!--//*********************************************** // Author: Xiaojun.Liu // Create date: 2007.05.23 //************************************************* //初始化TabBarfunction initTabBar()...{ var objLastTabIndex = document.getElementById("hidLastTabIndex"); var objTabsIndex = document.getElementById("hidTabsIndex"); objLastTabIndex.value = "0"; objTabsIndex.value = "0,"; buildTabBar(-1);}//新增一个TabBarfunction buildTabBar(newIndex)...{ var objCurTabsIndex = document.getElementById("hidCurTabIndex"); var objLastTabIndex = document.getElementById("hidLastTabIndex"); var objTabsIndex = document.getElementById("hidTabsIndex"); var objTabBar = document.getElementById("tabbar"); if(newIndex==0) //进行新增操作 ...{ //新增Tab objLastTabIndex.value = parseInt(objLastTabIndex.value) + 1; objTabsIndex.value = objTabsIndex.value + objLastTabIndex.value + ","; objCurTabsIndex.value = parseInt(objLastTabIndex.value) + 1; //加载新建iFrame createIFrame(parseInt(objLastTabIndex.value)); } //字符串 var strHtml = ""; var strHtmlBegin = "<table border=0 cellpadding=0 cellspacing=0 width=100% ><tr>"; var strHtmlEnd = "<td > </td></tr></table>"; var strBtnCreate = "<td width=80 align=center class=menu_p_mouseout οnmοuseοut="this.className='menu_p_mouseout'" οnmοuseοver="this.className='menu_p_mouseover'" ><a href="javascript:void(0);" οnclick='JavaScript:buildTabBar(0);' title='新建查询(快捷键:N)'>新查询(N)</a></td>"; var arr = objTabsIndex.value.split(","); for(var i=0;i<arr.length-1;i++) ...{ if(parseInt(arr[i])>0) ...{ if(parseInt(arr[i])==parseInt(newIndex) && parseInt(newIndex)!=0) ...{ objCurTabsIndex.value = parseInt(arr[i]); document.getElementById("iframe_"+arr[i]).style.display = ""; strHtml += "<td width=70 align=center id=btnTab_"+arr[i]+" class=menu_p_selected >查询"+arr[i]+" <a href="JavaScript:void(0);" title="关闭查询(快捷键:C)" οnclick="JavaScript:closeIFrame("+arr[i]+");" ><sup>x</sup></a></td>"; } else ...{ if(parseInt(newIndex)==0 && parseInt(arr[i])==parseInt(objLastTabIndex.value)) ...{ objCurTabsIndex.value = parseInt(parseInt(objLastTabIndex.value)); document.getElementById("iframe_"+parseInt(objLastTabIndex.value)).style.display = ""; strHtml += "<td width=70 align=center id=btnTab_"+parseInt(objLastTabIndex.value)+" class=menu_p_selected >查询"+parseInt(objLastTabIndex.value)+" <a href="JavaScript:void(0);" title="关闭查询(快捷键:C)" οnclick="JavaScript:closeIFrame("+parseInt(objLastTabIndex.value)+");" ><sup>x</sup></a></td>"; } else ...{ document.getElementById("iframe_"+arr[i]).style.display = "none"; strHtml += "<td width=70 align=center id=btnTab_"+arr[i]+" class=menu_p_mouseout οnmοuseοut="this.className='menu_p_mouseout'" οnmοuseοver="this.className='menu_p_mouseover'" ><a href="JavaScript:void(0);" title='使用方向键更快捷' οnclick='JavaScript:buildTabBar("+arr[i]+");'>查询"+arr[i]+"</a> <a href="JavaScript:void(0);" title="关闭查询(快捷键:C)" οnclick="JavaScript:closeIFrame("+arr[i]+");" ><sup>x</sup></a></td>"; } } } } //写TabBar objTabBar.innerHTML = strHtmlBegin + strHtml + strBtnCreate + strHtmlEnd;}function closeIFrame(index)...{ var objCurTabsIndex = document.getElementById("hidCurTabIndex"); var objLastTabIndex = document.getElementById("hidLastTabIndex"); var objTabsIndex = document.getElementById("hidTabsIndex"); // objTabsIndex.value = objTabsIndex.value.replace(index+",",""); var arr = objTabsIndex.value.split(","); objLastTabIndex.value = arr[arr.length-2]; if(parseInt(arr[arr.length-2])==0) ...{ objCurTabsIndex.value = -1; buildTabBar(-1); } else ...{ if( parseInt(objCurTabsIndex.value) != parseInt(index) ) ...{ objCurTabsIndex.value = parseInt(objCurTabsIndex.value); } else ...{ objCurTabsIndex.value = parseInt(arr[arr.length-2]); } buildTabBar(parseInt(objCurTabsIndex.value)); } // //document.getElementById("iframe_"+index).style.display = "none"; document.getElementById("iframe_"+index).removeNode(true);}//创建iFramefunction createIFrame(index)...{ element=document.createElement("iframe");//1 element.src = "http://www.baidu.com/";//2这里可以使用变量 element.id = "iframe_"+index;//3 element.className = "iframe";//4 document.all.Form1.appendChild(element);//10}//通过方向键调整Tabfunction onHotKey(hotKey)...{ var leftKey = 37; //方向键Left var rightKey = 39; //方向键Right var nKey = 78; //新增Tab var cKey = 67; //关闭Tab var objCurTabsIndex = document.getElementById("hidCurTabIndex"); var objTabsIndex = document.getElementById("hidTabsIndex"); var leftTabIndex = -1; var rightTabIndex = -1 ; var arr = objTabsIndex.value.split(","); for(var i=0;i<arr.length-1;i++) ...{ if( parseInt(objCurTabsIndex.value)==parseInt(arr[i]) ) ...{ // if( (i-1)<0 ) ...{ leftTabIndex = -1; } else if( (i-1)==0 ) ...{ leftTabIndex = arr[1]; } else ...{ leftTabIndex = arr[i-1]; } // if(rightTabIndex==0) ...{ rightTabIndex = -1; } else if( (i+1)>(arr.length-2) ) ...{ rightTabIndex = arr[arr.length-2]; } else ...{ rightTabIndex = arr[i+1]; } } } //新增Tab if(hotKey==nKey) ...{ buildTabBar(0); } //关闭Tab if(hotKey==cKey) ...{ if(parseInt(objCurTabsIndex.value)>0) ...{ closeIFrame(parseInt(objCurTabsIndex.value)); } } //向左移动Tab if(hotKey==leftKey) ...{ if(leftTabIndex < 0) ...{ objCurTabsIndex.value = -1; } else ...{ objCurTabsIndex.value = leftTabIndex; } // buildTabBar(leftTabIndex); } //向右移动Tab if(hotKey==rightKey) ...{ if(rightTabIndex < 0) ...{ objCurTabsIndex.value = -1; } else ...{ objCurTabsIndex.value = rightTabIndex; } buildTabBar(rightTabIndex); }}//--> </ script > </ head > < body onload ="javascript:initTabBar();" onkeydown ="JavaScript:onHotKey(window.event.keyCode);" > < form id ="Form1" method ="POST" action ="" > < div id ="tabbar" class ="p_header" > </ div > < input type ="hidden" id ="hidTabsIndex" value ="0," > < input type ="hidden" id ="hidLastTabIndex" value ="0" > < input type ="hidden" id ="hidCurTabIndex" value ="-1" > </ form > </ body > </ html > 样式表文件 baseStyle.css body {...} { font-family: verdana; font-size:11px; color:#3F3F3F; } td {...} { font-family:Tahoma; font-size:12px;} a {...} { color:#1B73BA; text-decoration:none; } a:hover {...} { color:#FF0000; text-decoration:none; } .TextBox {...} { font-family: verdana; font-size: 11px; color:#000000;} .TextBox_Readonly {...} { font-family: verdana; font-size: 12px; background-color:#F6F6F6; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 4px; PADDING-BOTTOM: 2px; } .TextBox_MultiLine {...} { font-family: verdana; font-size: 11px; border:1px solid #DCEFFA; color:#000000;} .Button {...} { BORDER-LEFT: #F0F8FF 1px solid; BORDER-RIGHT: #F0F8FF 2px solid; BORDER-TOP: #F0F8FF 1px solid; BORDER-BOTTOM: #F0F8FF 2px solid; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 4px; PADDING-BOTTOM: 2px; FONT-FAMILY: verdana; FONT-SIZE: 13px; FONT-WEIGHT: none; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#B3D997); CURSOR: hand; COLOR: #18345F; HEIGHT: 25px;} .menu_p_mouseout {...} { BORDER-LEFT: #FFFFFF 1px solid; BORDER-RIGHT: #FFFFFF 0px solid; BORDER-TOP: #FFFFFF 0px solid; BORDER-BOTTOM: #FFFFFF 0px solid; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px; PADDING-BOTTOM: 0px; FONT-FAMILY: verdana; FONT-SIZE: 14px; FONT-WEIGHT: none; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=Silver); CURSOR: hand; COLOR: #18345F; HEIGHT: 30px;} .menu_p_mouseover {...} { BORDER-LEFT: #FFFFFF 1px solid; BORDER-RIGHT: #FFFFFF 1px solid; BORDER-TOP: #FFFFFF 1px solid; BORDER-BOTTOM: #FFFFFF 1px solid; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px; PADDING-BOTTOM: 0px; FONT-FAMILY: verdana; FONT-SIZE: 14px; FONT-WEIGHT: bold; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=Silver); CURSOR: hand; COLOR: #18345F; HEIGHT: 30px;} .menu_p_selected {...} { BORDER-LEFT: #FFFFFF 1px solid; BORDER-RIGHT: #FFFFFF 1px solid; BORDER-TOP: #FFFFFF 1px solid; BORDER-BOTTOM: #FFFFFF 1px solid; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px; PADDING-BOTTOM: 0px; FONT-FAMILY: verdana; FONT-SIZE: 14px; FONT-WEIGHT: bold; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=Silver); COLOR: #18345F; HEIGHT: 30px;} .p_header {...} { BORDER-LEFT: #FFFFFF 0px solid; BORDER-RIGHT: #FFFFFF 0px solid; BORDER-TOP: #FFFFFF 0px solid; BORDER-BOTTOM: #FFFFFF 1px solid; PADDING-LEFT: 4px; PADDING-RIGHT: 2px; PADDING-TOP: 2px; PADDING-BOTTOM: 0px; FONT-FAMILY: verdana; FONT-SIZE: 12px; height: 30px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=Silver, EndColorStr=#FFFFFF);} .iframe {...} { BORDER-TOP: #CAD9EE 1px solid; BORDER-BOTTOM: #CAD9EE 1px solid; BORDER-LEFT: #CAD9EE 1px solid; BORDER-RIGHT: #CAD9EE 1px solid; WIDTH: 100%; HEIGHT: 90%; }