解决Chrome Safari Opera环境下 动态创建iframe onload事件同步执行
我们先看下面的代码：
setTimeout(function(){
alert(count);
},2000);
var count = [];
document.body.appendChild(createEditorBody());
function oninitialized(){
count.push(2);
}
count.push(1);
function createEditorBody(){
var editorBody = createElement('div',{
'class':'editor-body',
'html':'<iframe frameborder="0"></iframe>'
});
var ifr = editorBody.querySelector('iframe');
addEvent(ifr,'load',function(){
doc = ifr.contentDocument || ifr.contentWindow.document;
//页面处于正在加载的状态
//只要在doc.write()方法前后加上doc.open(), doc.close()就可以了
//IE下有权限问题
!document.all && doc.open();
doc.write('<!DOCTYPE html>\
<html>\
<head>\
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">\
<link href="iframe.css" rel="stylesheet">\
</head>\
<body></body>\
</html>'
);
!document.all && doc.close();
oninitialized();
});
return editorBody;
};
function createElement(tag,obj){
if(typeof tag !== 'string') return;
var node = document.createElement(tag),
prop, value;
for(prop in obj){
value = obj[prop];
if(prop === 'html')
value && (node.innerHTML = value);
else if(typeof value === 'function')
value && addEvent(node,prop,value);
else
value && node.setAttribute(prop,value);
}
return node;
};
function addEvent(el,type,fn,capture) {
if (window.addEventListener) {
if (type === "mousewheel" && document.mozHidden !== undefined) {
type = "DOMMouseScroll";
}
el.addEventListener(type, fn, capture || false);
} else if (window.attachEvent) {
el.attachEvent("on" + type, fn);
}
};
IE,火狐，运行结果为1,2
Chrome Safari Opera 运行结果为2,1
很奇怪Chrome Safari Opera环境下onload事件似乎变成了同步执行，我们都知道事件是异步的，应该是先走count.push(1); 再执行oninitialized方法 count.push(2);
原因是Chrome Safari Opera执行速度过快，导致onload事件同步执行
解决方案：
1、为iframe标签src属性指定一个不存在的页面，因为后面的doc.write会把页面重写
2、防止瞬间显示404页面，为iframe设置宽高为0，在onload事件中改为100%
代码如下：
var editorBody = createElement('div',{
'class':'editor-body',
'html':'<iframe frameborder="0" src="iframe.html" style="width:0;height:0;"></iframe>'
});
addEvent(ifr,'load',function(){
................
ifr.style.width = '100%';
ifr.style.height = '100%';
................
});
解决Chrome Safari Opera环境下 动态创建iframe onload事件同步执行的更多相关文章
- 20181225-Linux Shell Bash环境下自动化创建ssh互信脚本
20181225-Linux Shell Bash环境下自动化创建ssh互信脚本 1. 我的Blog 博客园 https://www.cnblogs.com/piggybaba/ 个人网站 http: ...
- 解决chrome浏览器在win8下没有注册类的问题
解决chrome浏览器在win8下没有注册类的问题 新建一个txt,里面存放代码 Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SO ...
- 【案例分享】使用ActiveReports报表工具，在.NET MVC模式下动态创建报表
提起报表,大家会觉得即熟悉又陌生,好像常常在工作中使用,又似乎无法准确描述报表.今天我们来一起了解一下什么是报表,报表的结构.构成元素,以及为什么需要报表. 什么是报表 简单的说:报表就是通过表格.图 ...
- eclipse环境下无法创建android virtual Devices(AVD)问题解决的方法汇总
首先,要在eclipse环境下成功的创建一个安卓虚拟机,须要有三项东西,第一就是eclipse,第二就是android SDK Manager,第三就是ADT,也就是eclipse环境下的一个安卓虚拟 ...
- Anaconda3+python3环境下如何创建python2环境（win+Linux下适用，同一个anaconda下py2/3共存）
本人之前已经在anaconda环境下已经安装了python3的环境,现在因为一些需求,要安装python2环境 1.打开anaconda的anaconda prompt查看当前环境: conda in ...
- 解决jquery动态创建元素绑定事件失效问题
存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...
- 解决 GTK+/GNOME 3 环境下 Java Swing 程序使用本地 GTK+ 主题时菜单无边框 bug 的方法
在 GTK+/GNOME 3 环境下采用默认的 Adwaita 主题时,Java Swing 程序如果使用本地 GTK+ 主题会出现菜单无边框的 bug,这个问题也可能在其他常用的 GTK+ 主题中出 ...
- 解决thinkphp在开发环境下文件模块找不到的问题
win10系统下,phpstudy开发环境下小问题描述: 找不到public公共模块. Not Found The requested URL /public/admin/login.html was ...
- AIX 环境下动态路由
IBM AIX v5.3操作系统环境下动态路由配置如下: 1,用命令lssrc -S routed和lssrc -S gated分别检查routed和gated子系统是是活动状态.如果这两个子系统为活 ...
随机推荐
- 普通java工程的resources目录寻址
问题: 普通java工程的src/main/resources目录下的配置文件如何寻址 在src/main/java目录下的代码中如何访问src/main/resources目录下的配置文件? Mav ...
- 将CodedUI Test 放到控制台程序中，模拟鼠标键盘操作
CodedUI Test是微软的自动化测试工具,在VS中非常好用.可以用来模拟鼠标点击,键盘输入.但执行的时候必须要用mstest调用,无法传入参数(当然可以写入config文件中,但每次修改十分麻烦 ...
- Python菜鸟之路：DOM基础
前言 DOM 是 Document Object Model(文档对象模型)的缩写,定义了访问和操作 HTML 文档的标准方法.DOM把网页和脚本以及其他的编程语言联系了起来.DOM属于浏览器,而不是 ...
- 浅析TCP/IP
TCP/IP概述 TCP/IP起源于1969年美国国防部(DOD:The United States Department Of Defense)高级研究项目管理局(APRA:AdvancedRese ...
- python面试题（五）
1 谈谈你对面向对象的理解? 面向对象的编程---object oriented programming,简称:OOP,是一种编程的思想.OOP把对象当成一个程序的基本单元,一个对象包含了数据和操作数 ...
- app开发制作会难吗？app开发好学吗？
前面我们讲到了app是什么,APP是运行在智能手机的第三方应用程序,可以满足用户的不同需求.那么app开发制作会难吗?这个与产品的复杂度有很大的关系,复杂度包括业务逻辑多不多,业务模块多不多等,对于玩 ...
- Android 4.4 Kitkat 音频实现及简要分析
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jingxia2008/article/details/26701899 在 Android 4.4 ...
- zabbix-2.4.8-1添加nginx状态监控
前期准备:nginx在编译是必须要加如下参数: 并且要在nginx的配置文件中添加如下配置: server { listen *: default_server; server_name localh ...
- docker快速构建oracle数据库
1.查看可用镜像docker search oracle2.拉去想要的镜像docker pull wnameless/oracle-xe-11g3.基于wnameless/oracle-xe-11g创 ...
- C/C++ 数据类型的使用方法详解
cppreference.com -> C/C++ 数据类型 C/C++ 数据类型 C语言包含5个基本数据类型: void, integer, float, double, 和 char. 类型 ...