zoukankan      html  css  js  c++  java
  • 兼容各浏览器的iframe

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

     

  • 相关阅读:
    C# 数据权限缓存
    .net core平台使用遇到的坑
    @RenderBody @RenderPage @RenderSection
    _ViewStart.cshtml介绍
    Git中的AutoCRLF与SafeCRLF换行符问题
    select fotr update
    索引的区分度
    索引最左匹配原则
    mysql索引相关知识
    锁-乐观锁和悲观锁
  • 原文地址:https://www.cnblogs.com/HCJJ/p/5493821.html
Copyright © 2011-2022 走看看