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

 

兼容各浏览器的iframe - onlaod事件的更多相关文章

  1. 兼容各浏览器的js回车事件

    HTML代码: <input type="text" onkeydown="EnterPress(event)" /> JS代码: function ...

  2. 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

    今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...

  3. JS获取回车事件(兼容各浏览器)

    一.用到onkeydown获取事件动作, 二.用到键盘对应代码keyCode, 三. var event=arguments.callee.caller.arguments[0]||window.ev ...

  4. javascript 兼容各个浏览器的事件

  5. 在javascript中的浏览器兼容问题以及兼容浏览器汇总(默认事件,阻止冒泡,事件监听。。。)以及解决方式详解

    在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级   渐进增强(progressive enhancement): 针对低版本浏览器进 ...

  6. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器。

    前两篇目录: 仿淘宝头像上传功能(一)——前端篇. 仿淘宝头像上传功能(二)——程序篇. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器 之前的这两篇虽然实现了功能,但不兼容低版本浏览器,而且有些浏 ...

  7. 兼容IE浏览器的placeholder【超不错】

    jQuery EnPlaceholder plug (兼容IE浏览器的placeholder)使用 >>>>>>>>>>>>&g ...

  8. 兼容Firefox和IE的onpropertychange事件oninput

    原文 兼容Firefox和IE的onpropertychange事件oninput onpropertychange能够捕获每次输入值的变化.例如:对象的value值被改变时,onpropertych ...

  9. iframe onload事件触发两次

    标准参考 关于 HTML 4.01 规范中 onload 内在事件说明:http://www.w3.org/TR/html401/interact/scripts.html#adef-onload 关 ...

随机推荐

  1. mongodb(Index)

    备忘mongoDb 索引的一些知识点. 1.索引是用以加速数据库查询的手段,在mongo中主要是采用B树的方式: 2.每个集合最多可增加64个索引,不建议增加过多索引,原因在于一是索引本身占用空间,二 ...

  2. node(邮件发送特性)

    1.安装 npm install nodemailer https://github.com/andris9/Nodemailer 2.配置发邮件的账户开启SMTP功能: 3.程序样例如下: var ...

  3. 团队项目——站立会议DAY10

    第十次站立会议记录: 参会人员:张靖颜,钟灵毓秀,何玥,赵莹,王梓萱 项目进展: 1.张靖颜:进一步完善程序代码,提出扩展性的建议,增加程序的功能. 2.钟灵毓秀:修改已完成代码出现的bug,完善代码 ...

  4. 开源中国(oschina)的Git托管

    一些废话 对于使用CVS/SVN出身的人来说,Git始终有点难上手(比如我),因为概念较多,一时理不清,尽管网上已经有很多教程,其实后来我发现,要掌握它的办法就是使用它,着手开始用它做源码管理,有问题 ...

  5. 基于zepto的移动端日期+时间选择插件

    前段时间写了两个移动端的日期选择插件:轻量级移动端日期选择器,本来是为特定的场景中使用的,结果有同学反应不够灵活和强大.虽然我的看法是移动端的界面要尽可能简洁,功能要尽可能简单,但是难免还是会有各种各 ...

  6. Linux 循环

    200 ? "200px" : this.width)!important;} --> 简介 if循环 if conditon then commandselse comma ...

  7. 消息队列-rabbitMQ

    消息队列两个用处:服务间解耦,缓解压力(削峰平谷),以前用过ZMQ.狼厂内部的NMQ,现在接触了java开源的kafka和RabbitMQ.目前先不求甚解,有个大概的认识. RabbitMQ的安装和入 ...

  8. Git Day03,GitHub 1st

    1st, SSH key: Add a pic @ Sep 18 2016 20:26 To note the configuration process on Linux: 2nd,github网站 ...

  9. NPOIExcelHelper

    using System.Data; using System.Configuration; using System.Web; using System.IO; using System.Text; ...

  10. 我也说百度和google

    对于程序员,最好的老师恐怕还是百度或者google或一些专业的it社区.网站了罢! 之前曾听到这样的一句话, 文艺程序员用Google Scholar/Scirus/stackoverflow.普通程 ...