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

最新推荐文章于 2024-01-08 14:37:21 发布

转载最新推荐文章于 2024-01-08 14:37:21 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/HCJJ/p/5493821.html

文章标签：

#php

本文介绍了一种在不同浏览器环境下确保Iframe加载完成的方法。针对IE及现代浏览器特性，使用readystatechange及onload事件监听，配合后台延迟响应测试，实现跨浏览器的可靠加载检测。

上次工作中，在使用 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)});

转载于:https://www.cnblogs.com/HCJJ/p/5493821.html