工作的时候遇到了所谓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中,实际代码如下:
Home//既然ajax的方式加载的js无法调用,那么可以通过使用主页面嵌入js,这样的话可能要考虑js与view的分离,其实也是不错的
var xmlhttp;if (window.XMLHttpRequest){//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=newXMLHttpRequest();
}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=newXMLHttpRequest();
}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();
}
tab.jsp
alert("whatt?");
}
原文:http://www.cnblogs.com/dont27/p/3634230.html