兼容各浏览器的iframe - onlaod事件

时间:2024-01-02 16:18:02

上次工作中,在使用 Iframe+FormSubmit进行无刷新提交时,如果后台返回的数据有延迟,或者浏览器对Iframe内容的更改过慢的话,会遇到onload响应在Iframe内容改变之前触发,这也就导致了我不能获得我所需要的数据。

之后的解决方法是使用Jquery的load事件。

但是总希望自己能够解决这个问题,但是没有实际的后台配合测试,也不知道到底解决了没有,所以先放着下面吧:

当前版本:v0.0

注:没有实际测试使用,还不知道问题是否解决!!!

     function load(obj){

         if(document.all){ // 对于IE10- 以下使用readState的值来检测内容是否加载好。
var state = null;
(function check(){ try{
state = obj.contentWindow.document.readyState;
}catch(msg){
state = null;
} if(state == 'complete'){ alert();
return false;
}
window.setTimeout(check,);
})(); }else{ // 对于IE11 Edge CH FF 等浏览器直接绑定onload事件进行判断。 obj.onload=function(){
alert();
} } }

调用代码:

 btn.onclick=function(){
document.forms[].submit(); //表单提交
load(ifr);
}

这次,我通过使用IE自有的onreadystatechange时间结合onload时间一起使用,在配合后台的延迟执行代码,经测试,该版的解决方案,应该可以达到理想的效果:

测试浏览器:

  IE5 : OK

  IE6 : OK

  IE7 - IE11 : OK

  safari 5.1 : OK

  Chrome : OK

Firefox : OK

Opera12.10 (最后一版基于poster内核) : OK

当前版本:v1.0

具体代码:

 function load(obj,fn){

    obj.isOpen = false;
obj.onreadystatechange=function(){
if(this.readyState == 'complete'){
if(!this.isOpen){
this.isOpen = true;
fn && fn();
}
}
};
obj.onload=function(){
if(!this.isOpen){
this.isOpen = true;
fn && fn();
}
}; }

PHP代码:

 <?php
$v = $_REQUEST['v'];
sleep(5);
echo 'success';
?>

调用方式:

load(ifr,function(){alert(ifr.contentWindow.document.body.innerHTML)});