兼容各浏览器的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();
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事件的更多相关文章
- 兼容各浏览器的js回车事件
HTML代码: <input type="text" onkeydown="EnterPress(event)" /> JS代码: function ...
- 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...
- JS获取回车事件(兼容各浏览器)
一.用到onkeydown获取事件动作, 二.用到键盘对应代码keyCode, 三. var event=arguments.callee.caller.arguments[0]||window.ev ...
- javascript 兼容各个浏览器的事件
- 在javascript中的浏览器兼容问题以及兼容浏览器汇总(默认事件,阻止冒泡,事件监听。。。)以及解决方式详解
在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级 渐进增强(progressive enhancement): 针对低版本浏览器进 ...
- 仿淘宝头像上传功能(三)——兼容 IE6 浏览器。
前两篇目录: 仿淘宝头像上传功能(一)——前端篇. 仿淘宝头像上传功能(二)——程序篇. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器 之前的这两篇虽然实现了功能,但不兼容低版本浏览器,而且有些浏 ...
- 兼容IE浏览器的placeholder【超不错】
jQuery EnPlaceholder plug (兼容IE浏览器的placeholder)使用 >>>>>>>>>>>>&g ...
- 兼容Firefox和IE的onpropertychange事件oninput
原文 兼容Firefox和IE的onpropertychange事件oninput onpropertychange能够捕获每次输入值的变化.例如:对象的value值被改变时,onpropertych ...
- iframe onload事件触发两次
标准参考 关于 HTML 4.01 规范中 onload 内在事件说明:http://www.w3.org/TR/html401/interact/scripts.html#adef-onload 关 ...
随机推荐
- mongodb(Index)
备忘mongoDb 索引的一些知识点. 1.索引是用以加速数据库查询的手段,在mongo中主要是采用B树的方式: 2.每个集合最多可增加64个索引,不建议增加过多索引,原因在于一是索引本身占用空间,二 ...
- node(邮件发送特性)
1.安装 npm install nodemailer https://github.com/andris9/Nodemailer 2.配置发邮件的账户开启SMTP功能: 3.程序样例如下: var ...
- 团队项目——站立会议DAY10
第十次站立会议记录: 参会人员:张靖颜,钟灵毓秀,何玥,赵莹,王梓萱 项目进展: 1.张靖颜:进一步完善程序代码,提出扩展性的建议,增加程序的功能. 2.钟灵毓秀:修改已完成代码出现的bug,完善代码 ...
- 开源中国(oschina)的Git托管
一些废话 对于使用CVS/SVN出身的人来说,Git始终有点难上手(比如我),因为概念较多,一时理不清,尽管网上已经有很多教程,其实后来我发现,要掌握它的办法就是使用它,着手开始用它做源码管理,有问题 ...
- 基于zepto的移动端日期+时间选择插件
前段时间写了两个移动端的日期选择插件:轻量级移动端日期选择器,本来是为特定的场景中使用的,结果有同学反应不够灵活和强大.虽然我的看法是移动端的界面要尽可能简洁,功能要尽可能简单,但是难免还是会有各种各 ...
- Linux 循环
200 ? "200px" : this.width)!important;} --> 简介 if循环 if conditon then commandselse comma ...
- 消息队列-rabbitMQ
消息队列两个用处:服务间解耦,缓解压力(削峰平谷),以前用过ZMQ.狼厂内部的NMQ,现在接触了java开源的kafka和RabbitMQ.目前先不求甚解,有个大概的认识. RabbitMQ的安装和入 ...
- Git Day03,GitHub 1st
1st, SSH key: Add a pic @ Sep 18 2016 20:26 To note the configuration process on Linux: 2nd,github网站 ...
- NPOIExcelHelper
using System.Data; using System.Configuration; using System.Web; using System.IO; using System.Text; ...
- 我也说百度和google
对于程序员,最好的老师恐怕还是百度或者google或一些专业的it社区.网站了罢! 之前曾听到这样的一句话, 文艺程序员用Google Scholar/Scirus/stackoverflow.普通程 ...