解决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子系统是是活动状态.如果这两个子系统为活 ...
随机推荐
- 微信小程序开发遇见的问题之一
在开发的时候,因为要定位到当前的城市,而小程序提供的API只是能够获取当前的经纬度,所以我们需要通过接入百度地图的API.调接口的时候发现报错,说域名不合法,此时千万不要着急,只要你登录你的微信开发公 ...
- jQuery之获取select选中的值
本来以为jQuery("#select1").val();是取得选中的值, 那么jQuery("#select1").text();就是取得的文本. 这是不正确 ...
- 巨蟒django之权限8:排序&&菜单展开权限归属
1.权限控制的流程+表结构 内容回顾: wsgi:socket进行收发消息 中间件:(超级重点的面试题)在全局范围内控制django的输入和输出的一个钩子,处理输入和输出说白了就是处理请求和响应req ...
- PHP 获得域控内用户的计算机登录名
一个需求: 在域控范围获得访问用户的计算机名.方法: 1．测试软件环境: XAMPP Control Panel V3.2.1 , Apache version 2.4.7 2．Apache 2.2 ...
- 费马小定理 Fermat Theory
w 整数的质数次方和自身的差是是质数的倍数 费马小定理(Fermat Theory)是数论中的一个重要定理,其内容为: 假如p是质数,且Gcd(a,p)=1,那么 a(p-1)≡1(mod p).即: ...
- MySQL中Btree和Hash的局限小结
在索引中,Btree索引和Hash索引的局限性,在这里粗略罗列一下 1 Btree局限 B-树中的节点都是顺序存储的,所以可以利用索引进行查找(找某些值),也可以对查询结果进行ORDER BY(注意O ...
- trait特性
1.trait特性可以和特化或者偏特化结合. 2.trait可以和类型转换结合.
- C# 截屏函数
截屏函数: using System; using System.Collections.Generic; using System.Linq; using System.Windows.Forms; ...
- jquery ajax属性async(同步异步)示例
在jquery的ajax中如果我们希望实现同步或者异步我们可以直接设置async发生为真或假即可true false,下面举几个jquery ajax同步和异步实例 例1.jquery+ajax/&q ...
- 爬虫基础库之requests模块
一.requests模块简介 使用requests可以模拟浏览器请求,比起之前用到的urllib,requests模块的api更加快捷,其实ruquests的本质就是封装urllib3这个模块. re ...