我们先看下面的代码：

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. SQL Server函数​

    阅读目录 SQL Server函数---Union与Union All的区别 回到顶部 SQL Server函数---Union与Union All的区别 如果我们需要将两个select语句的结果作为 ...

  2. 基于java mail实现简单的QQ邮箱发送邮件

    刚学习到java邮件相关的知识,先写下这篇博客,方便以后翻阅学习. -----------------------------第一步 开启SMTP服务 在 QQ 邮箱里的 设置->账户里开启 S ...

  3. Redis3.2.5配置主从服务器遇到的一些错误

    注意:关闭主从服务器的防火墙 问题一: WARNING: The TCP backlog setting of 511 cannot be enforced because /proc/sys/net ...

  4. Linux CentOS使用yum安装Docker

    Docker支持以下的CentOS版本: 目前,CentOS仅发行版本中的内核支持Docker. Docker运行在CentOS7上,要求系统为64位.系统内核版本为3.10以上. Docker运行在 ...

  5. python面试题(六)

    1 异常处理写法以及如何主动跑出异常(应用场景) try: """执行语句""" except: #异常类型 ""&qu ...

  6. Android系统移植与调试之------->build.prop文件详细赏析

    小知识:什么是build.prop?   /system/build.prop 是一个属性文件,在Android系统中.prop文件很重要,记录了系统的设置和改变,类似於/etc中的文件.这个文件是如 ...

  7. 我的Android进阶之旅------>Android使用9Patch图片作为不失真背景

    做人要大度,海纳百川,做事要圆滑,左右逢源,这让我想到了编程也是如此,代码要扩展,界面也要考虑自适应. 这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 1 ...

  8. SQL Server误删表查看

    SQL Server误删表查看 转自:http://blog.51cto.com/aimax/2134572   SQL Server 完全恢复模式 下恢复误删除的表,进行 精准 恢复 1.  找出被 ...

  9. Centos6.3下Ganglia3.6.0安装配置

    近期安装Ganglia.因为之前Linux基础基本为0.因此费了非常大的周折.最后在失败了好多次之后最终看到了梦寐以求的web界面.以下总结下这几天来的工作. ganglia是一个监控软件,他包括三部 ...

  10. JavaWeb—监听器Listener

    1.简介 Listener是Servlet的监听器,Servlet 监听器用于监听一些重要事件的发生,监听器对象在事情发生前.发生后可以做一些必要的处理. JavaWeb里面的listener是通过观 ...