iframe载入完成时的事件监听

经常会遇到这样一种情景&＃xff1a;
在iframe里嵌入另外一个页面时。如果iframe载入的页面响应较快&＃xff0c;或许我们感觉不到页面载入的不同步&＃xff0c;但试想&＃xff0c;如果一个需要内嵌到iframe里的页面的响应很慢&＃xff0c;这里会出现一种什么现象呢&＃xff1f;这时将会出现所有页面已经载入完成&＃xff0c;但在iframe元素处&＃xff0c;将会出现空白&＃xff0c;直到内嵌页面完成载入时&＃xff0c;该空白处才会显示新载入的页面。

可想而知&＃xff0c;一个页面如果长时间的空白&＃xff0c;对于浏览者来说将意味着什么。
如果在内嵌页面未载入完成时&＃xff0c;给出一种加载提示信息。如&＃xff1a;“页面加载中”之类的&＃xff0c;我想这对浏览页面用户来讲&＃xff0c;将不再是煎熬&＃xff0c;更是一种视觉上的享受。

为了实现这样的效果&＃xff0c;一般会采用如下原理处理。

• iframe载入区域给出友好的提示信息

• 当iframe载入完成时&＃xff0c;清空提示信息&＃xff0c;而让iframe显示

这些都比较容易&＃xff0c;但现在的问题的关键是怎么监听iframe元素内的页面已经载入完成。
关键这个问题&＃xff0c;一般来讲&＃xff0c;会分两种情况的来讨论解决方案。

• 同域的嵌套。最好是让子页面调用父页面的方法

• 如果是异域&＃xff0c;但子页面无法修改&＃xff0c;那么&＃xff1a;在Firefox/Opera/Safari中&＃xff0c;可以直接使用iframe onload事件&＃xff1b;而在IE中&＃xff0c;可以通过定时器测定子页面的document.readyState&＃xff0c;或者使用iframe onreadystatechange事件计算该事件的响应

同域嵌套

parent.htmlfunction ifrmLoaded() {// code here
}
sub.htmlwindow.onload &＃61; function() {window.parent.ifrmLoaded();
}

嵌套页面不能修改&＃xff0c;或者异域嵌套

• Firefox/Opera/Safari中直接使用iframe onload事件

document.getElementById(&＃39;ifrm&＃39;).onload &＃61; function() {//here doc
}

• 在IE下&＃xff0c;注册iframe onreadystatechange事件

var oFrm &＃61; document.getElementById(&＃39;ifrm&＃39;);
oFrm.onreadystatechange &＃61; function() {if (this.readyState && this.readyState &＃61;&＃61; &＃39;complete&＃39;) {onComplete();}
}

兼容Firefox/Opera/Safari/IE的处理方式

var oFrm &＃61; document.getElementById(&＃39;ifrm&＃39;);
oFrm.onload &＃61; oFrm.onreadystatechange &＃61; function() {if (this.readyState && this.readyState !&＃61; &＃39;complete&＃39;) return;else {onComplete();}
}

http://hqlong.com/2009/02/620...