工作的時候遇到了所謂html內多tab展示的情況，主要是通過iframe來關聯子頁面；
不過也不知道從何時開始記得是說iframe不建議多用，所以想想，還是找找有沒有其他方法（不應用於工作）；
先說下關於用iframe的感覺吧，第一次嘗試實際應用，iframe都有至少一個form在里面，而且主頁面是為了做關於一個tab提交form之后提示並切換到下一個tab，主頁面負責加載了tab的源地址即xxx.jsp ，那么當時的做法時，iframe提交后javascript調用父頁面的js方法實現tab切換，好在工作上用的是ie（為什么我反倒覺得惡心），通過如下：
//iframe里js
function pageNext(param){
window.parent.pageNext(param);
}
//父頁面里的js
function pageNext(){
alert("孩子，你居然召喚了父親大人我的魔力了//魔王奶爸看多了");
//自行實現
}
不過這樣的父子頁面調用，貌似在webkit下似乎報錯了，難道因為這樣所以才說盡量別用。
好了，說回正題，當時我就咨詢了下其他人，有沒有不用iframe的做法，剛好他們也在研究，查看了一下網上資料。
通過在主頁面設置div，觸發tab頁面的內容放置於div中，實際代碼如下：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Home</title> <script type="text/javascript" src="js/functionOfTab.js">
//既然ajax的方式加載的js無法調用，那么可以通過使用主頁面嵌入js，這樣的話可能要考慮js與view的分離，其實也是不錯的
</script> <script type="text/javascript"> function loadDiv(){ //隱藏了加載的文件地址 var xmlhttp; if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }; xmlhttp.open("GET","./ajax.do",true); xmlhttp.send(); } function loadDiv1(){ //直接加載文件，但這樣就暴露了加載的url var xmlhttp; if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }; xmlhttp.open("GET","./tab.html",true); xmlhttp.send(); } </script> </head> <body> <form name="testForm" action="./f.do"> <input type="submit" value="跳轉"/> </form> <div><input type="button" value="load" onclick="loadDiv();" /> <input type="button" value="load file" onclick="loadDiv1();" /></div> <div id="myDiv"></div> </body> </html>
tab.jsp
<script type="text/javascript"> function test(){//后加載是無法調用到的 alert("whatt?"); } </script> <input type="button" value="dede" onclick="test();" />