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

上次工作中，在使用 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(2);
                    return false;
                }
                window.setTimeout(check,400);
            })();

        }else{ // 对于IE11 Edge CH FF 等浏览器直接绑定onload事件进行判断。 

            obj.onload=function(){
                alert(1);
            }

        }
        
    }

 

调用代码：

btn.onclick=function(){
    document.forms[0].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)});