div ajax iframe,ajax+div 代替iframe 学习尝试

本文探讨了在HTML页面中实现多Tab展示时如何避免使用iframe,提出了使用Ajax动态加载内容到div的解决方案。作者分享了使用Ajax与JavaScript实现页面间交互的方法,以实现tab切换,并讨论了iframe在不同浏览器下的兼容性问题。
摘要由CSDN通过智能技术生成

工作的时候遇到了所谓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中,实际代码如下:

69c5a8ac3fa60e0848d784a6dd461da6.png

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();

}

69c5a8ac3fa60e0848d784a6dd461da6.png

tab.jsp

69c5a8ac3fa60e0848d784a6dd461da6.png

alert("whatt?");

}

69c5a8ac3fa60e0848d784a6dd461da6.png

原文:http://www.cnblogs.com/dont27/p/3634230.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值