我们先看下面的代码：

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事件同步执行的更多相关文章

  1. 20181225-Linux Shell Bash环境下自动化创建ssh互信脚本

    20181225-Linux Shell Bash环境下自动化创建ssh互信脚本 1. 我的Blog 博客园 https://www.cnblogs.com/piggybaba/ 个人网站 http: ...

  2. 解决chrome浏览器在win8下没有注册类的问题

    解决chrome浏览器在win8下没有注册类的问题 新建一个txt,里面存放代码 Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SO ...

  3. 【案例分享】使用ActiveReports报表工具，在.NET MVC模式下动态创建报表

    提起报表,大家会觉得即熟悉又陌生,好像常常在工作中使用,又似乎无法准确描述报表.今天我们来一起了解一下什么是报表,报表的结构.构成元素,以及为什么需要报表. 什么是报表 简单的说:报表就是通过表格.图 ...

  4. eclipse环境下无法创建android virtual Devices(AVD)问题解决的方法汇总

    首先,要在eclipse环境下成功的创建一个安卓虚拟机,须要有三项东西,第一就是eclipse,第二就是android SDK Manager,第三就是ADT,也就是eclipse环境下的一个安卓虚拟 ...

  5. Anaconda3+python3环境下如何创建python2环境（win+Linux下适用，同一个anaconda下py2/3共存）

    本人之前已经在anaconda环境下已经安装了python3的环境,现在因为一些需求,要安装python2环境 1.打开anaconda的anaconda prompt查看当前环境: conda in ...

  6. 解决jquery动态创建元素绑定事件失效问题

    存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...

  7. 解决 GTK+/GNOME 3 环境下 Java Swing 程序使用本地 GTK+ 主题时菜单无边框 bug 的方法

    在 GTK+/GNOME 3 环境下采用默认的 Adwaita 主题时,Java Swing 程序如果使用本地 GTK+ 主题会出现菜单无边框的 bug,这个问题也可能在其他常用的 GTK+ 主题中出 ...

  8. 解决thinkphp在开发环境下文件模块找不到的问题

    win10系统下,phpstudy开发环境下小问题描述: 找不到public公共模块. Not Found The requested URL /public/admin/login.html was ...

  9. AIX 环境下动态路由

    IBM AIX v5.3操作系统环境下动态路由配置如下: 1,用命令lssrc -S routed和lssrc -S gated分别检查routed和gated子系统是是活动状态.如果这两个子系统为活 ...

随机推荐

  1. 关于Apache Shiro权限框架的一些使用误区的解释

    多了不说了,进入正题,shiro是个权限框架提供权限管理等功能,网上的教程一般都是互相抄,比如<shiro:principal property="xxx"/>这个标签 ...

  2. 【python】-- Django路由系统（网址关系映射）、视图、模板

    Django路由系统(网址关系映射).视图.模板 一.路由系统(网址关系映射) 1.单一路由对应: 一个url对应一个视图函数(类) urls.py: url(r'^test', views.test ...

  3. Mysql在大型网站的应用架构演变（转）

    原文: Mysql在大型网站的应用架构演变 本文已经被多处转载,包括CSDN推荐以及码农周刊等等,阅读数超过5w+,回流到我博客流量的还是比较少,不过这不重要, 后续会分享更多技术,尽量试图把自己理解 ...

  4. python——re模块（正则表达）

    python——re模块(正则表达) 两个比较不错的正则帖子: http://blog.csdn.net/riba2534/article/details/54288552 http://blog.c ...

  5. Python3.6全栈开发实例[026]

    27.文件a.txt内容:每一行内容分别为商品名字,价钱,个数.apple 10 3tesla 100000 1mac 3000 2lenovo 30000 3chicken 10 3通过代码,将其构 ...

  6. samba了解

    1. samba是一个网络服务器,用于Linux和Windows之间共享文件 2,amba服务的启动.停止.重启    service smb start|stop|restart3. 掌握samba ...

  7. 并发 错误 java.lang.IllegalMonitorStateException: current thread not owner 分析

    public class ThreadTest implements Callable<String> { public String call() throws Exception { ...

  8. Junit单元测试注入spring中的bean（转载）

    转载自:http://blog.csdn.net/cy104204/article/details/51076678 一般对于有bean注入的类进行方法单元测试时,会发现bean对象并没有注入进来,对 ...

  9. 第二篇 Python图片处理模块PIL（pillow）

    本篇包含:16.Point    17.Putalpha    18.Putdata    19.Putpalette    20.Putpixel      21.Quantize     22.R ...

  10. php……流程

    流程:由两个及以上的业务步骤,完成一个完整的业务行为的过程,可称之为流程:注意是两个及以上的业务步骤.事物进行过程中的次序或顺序的布置和安排. 创建页面: 登录页面(login.php): <h ...