解决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子系统是是活动状态.如果这两个子系统为活 ...
随机推荐
- 路径 php中'.'和'..'还有'./'和'../'
./当前目录(就是当前执行文件所在目录) ../上级目录 / 这个才是根目文件名/ 同级目录 例子如图 1.cart下的index.php 1)要引用Public->css->index. ...
- nginx1.4.7+uwsgi+django1.9.2+gridfs 在ubuntu14.0.4上部署
本文基于root用户安装配置,实现django项目名为trcode sudo apt-get updatesudo apt-get install python-pipsudo apt-get ins ...
- mailing list的原理
1 发往mailing list邮箱的邮件会被所有订阅了该邮箱的人收到 说白了,就是一种邮件群发机制,为了简化群发,不是将所有的收件人放到收件人列表中,而是发往总的邮箱即可. 2 要向该mailing ...
- IOS自动布局的Problem
今天为做一个小小的footerView我的心脏差点气出来... 第一步 新建一个view xib文件 第二步 新建一个UIview的类 第三步 在UIview中间放一个Lable,添加约束,水平垂直居 ...
- 封装AFNetworking
用了一下AFNetworking感觉比ASIHttprequest 真心好用一些,因为我还是个初学者吧,很多ASIHttprequest 的功能还没有用到,与ASIHttprequest 不用的是AF ...
- vs编译程序不能实现，“未能完成操作 未指定的错误”的解决办法
1.先把.vcproj 文件剪切到其他地方 2.打开.sln,报错->点“确定”->再点“确定” 3.把 .vcproj 文件 放回来,在vs2005右边的“解决方案”处右键 重新加载,就 ...
- ASP-Server.Transfer-Response.Redirect
Server.Transfer Transfer 方法把一个 ASP 文件中创建的所有状态信息(所有 application/session 变量以及所有 request 集合中的项目)发送(传输)到 ...
- Display BLOBs and CLOBs (DB2可视化工具AQT )
Displaying BLOBs and CLOBs Dealing with LOBs BLOB and CLOB columns are difficult to display because: ...
- Vue.js之组件传值
Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...
- 让phpstorm 支持 vue文件并且语法高亮
1 安装 vue.js 插件 很遗憾,我的win版本没有支持的插件 2 修改文件类型 vue本质上还是html文件,包含了css html js,用html类型文件打开就可以 给html 文件添加 * ...