iframe载入完成时的事件监听

转自:[url]http://hqlong.com/2009/02/620.html[/url]

经常会遇到这样一种情况。
通过iframe嵌入另外一个页面时。如果iframe载入的页面响应较快,或许我们感觉不到页面载入的不同步,但试想,如果一个需要内嵌到iframe里的页面的响应很慢,这里会出现一种什么现象呢?这时将会出现所有页面已经载入完成,但在iframe元素处,将会出现空白,直到内嵌页面完成载入时,该空白处才会显示新载入的页面。
可想而知,一个页面如果长时间的空白,对于浏览者来说将意味着什么。
如果在内嵌页面未载入完成时,给出一种加载提示信息。如:“页面加载中”之类的,我想这对浏览页面用户来讲,将不再是煎熬,更是一种视觉上的享受。
为了实现这样的效果,一般会采用如下原理处理。
·iframe载入区域给出友好的提示信息。
·当iframe载入完成时,清空提示信息,而让iframe显示。
这些都比较容易,但现在的问题的关键是怎么监听iframe元素内的页面已经载入完成。
关键这个问题,一般来讲,会分两种情况的来讨论解决方案。
·同域的嵌套。最好是让子页面调用父页面的方法。
· 如果是异域,但子页面无法修改,那么:在Firefox/Opera/Safari中,可以直接使用iframe onload事件;而在IE中,可以通过定时器测定子页面的document.readyState,或者使用iframe onreadystatechange事件计算该事件的响应。
1.同域嵌套。

parent.html

function ifrmLoaded() {
// code here
}

sub.html

window.onload = function() {
window.parent.ifrmLoaded();
}


有时候,为了防止自己的页面不被别人嵌套,可以采用如下方式解决:


if(window.parent!=window) window.parent.location="http://hqlong.com";
//or
if(window.top!=window) window.top.location="http://hqlong.com";



2.嵌套页面不能修改,或者异域嵌套。
2.1 Firefox/Opera/Safari中直接使用iframe onload事件


document.getElementById('ifrm').onload = function() {
//here doc
}



2.2 在IE下,定时器测document.readyState或者注册iframe onreadystatechange事件
2.2.1 使用定时器


var oFrm = document.getElementById('ifrm');
var fmState=function(){
var state=null;
if(document.readyState){
try{
state=oFrm.document.readyState;
}catch(e){state=null;}
if(state=="complete" || !state) {
onComplete();
return;
}
window.setTimeout(fmState,10);
}
};


//在改变src或者通过form target提交表单时,执行语句:

if(fmState.TimeoutInt) window.clearTimeout(fmState.timeoutInt);
fmState.timeoutInt = window.setTimeout(fmState,400);



2.2.2 使用iframe onreadystatechange事件


var oFrm = document.getElementById('ifrm');
oFrm.onreadystatechange = function() {
if (this.readyState && this.readyState == 'complete') {
onComplete();
}
}



每当iframe加载页面,过程内会激活onreadystatechange事件三次,相应的状态分别是loading,interactive和complete,而最后一次才是complete.
3. 兼容Firefox/Opera/Safari/IE的处理方式。

var oFrm = document.getElementById('ifrm');
oFrm.onload = oFrm.onreadystatechange = function() {
if (this.readyState && this.readyState != 'complete') return;
else {
onComplete();
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值