解决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子系统是是活动状态.如果这两个子系统为活 ...
随机推荐
- Go语言的一些问题
1.go 运行错误expected 'package', found 'EOF'解决? 只要将文件保存一下,再运行就ok了. 2.问题如下: D:\goprojects>go buildcan' ...
- MongoDB学习笔记—概念解析
Mongo基本概念 下表将帮助您更容易理解Mongo中的一些概念: SQL术语/概念 MongoDB术语/概念 解释/说明 database database 数据库 table collection ...
- golang模板语法简明教程(后面有福利哦)
template是go 语言web开发中必不可少的,特此记录下来: [模板标签] 模板标签用"{{"和"}}"括起来 [注释] {{/* a comment ...
- JavaScript:学习笔记(2)——基本概念与数据类型
JavaScript:学习笔记(2)——基本概念与数据类型 语法 1．区分大小写．Test 和 test 是完全不同的两个变量. 2．语句最好以分号结束,也就是说不以分号结束也可以． 变量 1.JS的 ...
- php......留言板
部门内部留言板 一.语言和环境 实现语言 PHP 二.要求: 本软件是作为部门内员工之间留言及发送消息使用. 系统必须通过口令验证,登录进入.方法是从数据库内取出用户姓名和口令的数据进行校验. 用户管 ...
- 跟踪 twisted 里deferred 的Callback
twisted 提供了 deferred 机制,而关键点就是回调.通过查看deferred 源码 (version 8.2.0)我们可以 看到 deferred的addCallback是怎么工作的,以 ...
- 吐槽 坑爹的MySQL安装路径选择
一般再windows下面安装MySQL我们都会选择msi安装模式,然而安装最新版的MySQL(mysql-installer-community-5.7.11.0.msi 下载地址)发现MySQL默认 ...
- second application:use an arcgis.com webmap
<!DOCTYPE html> <html> <head> <title>Create a Web Map</title> <meta ...
- oracle 定时删除3天前的备份数据
不需要保留那么多,按公司要求只需要保留一个星期的即可. 1.那么有什么方法自动删除7天以前备份的*.log文件呢? 2.服务器过多,不可能一一手动创建,有没有自动完成这个创建计划任务的批处理呢? 首先 ...
- linux systemctl 指令 —— 阮一峰
Systemd 指令 原文链接如果有效,请点击原文链接查看.原文:http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-commands.ht ...