上次工作中,在使用 Iframe+FormSubmit进行无刷新提交时,如果后台返回的数据有延迟,或者浏览器对Iframe内容的更改过慢的话,会遇到onload响应在Iframe内容改变之前触发,这也就导致了我不能获得我所需要的数据。
之后的解决方法是使用Jquery的load事件。
但是总希望自己能够解决这个问题,但是没有实际的后台配合测试,也不知道到底解决了没有,所以先放着下面吧:
当前版本:v0.0
注:没有实际测试使用,还不知道问题是否解决!!!
1 function load(obj){ 2 3 if(document.all){ // 对于IE10- 以下使用readState的值来检测内容是否加载好。 4 var state = null; 5 (function check(){ 6 7 try{ 8 state = obj.contentWindow.document.readyState; 9 }catch(msg){ 10 state = null; 11 } 12 13 if(state == 'complete'){ 14 15 alert(2); 16 return false; 17 } 18 window.setTimeout(check,400); 19 })(); 20 21 }else{ // 对于IE11 Edge CH FF 等浏览器直接绑定onload事件进行判断。 22 23 obj.onload=function(){ 24 alert(1); 25 } 26 27 } 28 29 }
调用代码:
1 btn.onclick=function(){ 2 document.forms[0].submit(); //表单提交 3 load(ifr); 4 }
这次,我通过使用IE自有的onreadystatechange时间结合onload时间一起使用,在配合后台的延迟执行代码,经测试,该版的解决方案,应该可以达到理想的效果:
测试浏览器:
IE5 : OK
IE6 : OK
IE7 - IE11 : OK
safari 5.1 : OK
Chrome : OK
Firefox : OK
Opera12.10 (最后一版基于poster内核) : OK
当前版本:v1.0
具体代码:
1 function load(obj,fn){ 2 3 obj.isOpen = false; 4 obj.onreadystatechange=function(){ 5 if(this.readyState == 'complete'){ 6 if(!this.isOpen){ 7 this.isOpen = true; 8 fn && fn(); 9 } 10 } 11 }; 12 obj.onload=function(){ 13 if(!this.isOpen){ 14 this.isOpen = true; 15 fn && fn(); 16 } 17 }; 18 19 }
PHP代码:
1 <?php 2 $v = $_REQUEST['v']; 3 sleep(5); 4 echo 'success'; 5 ?>
调用方式:
load(ifr,function(){alert(ifr.contentWindow.document.body.innerHTML)});