解决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子系统是是活动状态.如果这两个子系统为活 ...
随机推荐
- Introduction to Mathematical Thinking - Week 7
Q: Why did nineteenth century mathematicians devote time to the proof of self-evident results? Selec ...
- 从“关于Java堆与栈的思考”一帖看错误信息的传播
我对转贴的信息一直有敌意,原因如下:首先,除了制造更多的信息垃圾,转贴不会带来新的价值,想收藏的话一个链接足矣:其次,将错误信息以讹传讹,混淆视听.不妨选一个典型的例子说明一二. 相信<关于Ja ...
- boost之日期date_time
date_time库使用的日期基于格里高利历,支持从1400-01-01到9999-12-31的日期. 空的构造函数会创建一个值为not_a_date_time的无效日期:顺序传入年月日值则创建一个对 ...
- SaltStack安装配置
一.环境准备:操作系统CentOS Linux release 7.3.1611master ip:192.168.1.180minion ip:192.168.1.183设置server(maste ...
- sql获取该周的开始结束日期
mssql函数 IF EXISTS ( SELECT 1 FROM sysobjects WHERE name = 'fn_GetWeekDate') DROP FUNCTION fn_GetWeek ...
- 剑指offer 面试8题
面试8题: 题目:二叉树的下一个节点 题目描述:给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 解题思路:详见剑 ...
- UI控件之UICollectionView
UICollectionView:集合视图,是iOS6.0后出现的,与UITableView类似,优势在于可以灵活的布局cell UICollectionViewLayout:布局类,抽象类,一般定义 ...
- Rabbitmq消费失败死信队列
Rabbitmq 重消费处理 一 处理流程图: 业务交换机:正常接收发送者,发送过来的消息,交换机类型topic AE交换机: 当业务交换机无法根据指定的routingkey去路由到队列的时候,会全部 ...
- Understanding When to use RabbitMQ or Apache Kafka
https://content.pivotal.io/rabbitmq/understanding-when-to-use-rabbitmq-or-apache-kafka How do humans ...
- .ssh中的文件的分别意义
当我们在用户的主目录使用如下命令: cd (进入个人主目录,默认为/home/hadoop) ssh-keygen -t rsa -P '' (注:最后是二个单引号) 表示在用户的主目录创建ssh登陆 ...