稍微了解一点框架的事件绑定的都知道 window.onload 事件需要在页面所有内容（包括图片、flash、iframe等）加载完后，才执行，但往往我们更希望在 DOM 一加载完就执行脚本，而各大框架都提供了这样的方法，今天就讨论下其中的原理。

标准浏览器都提供了一个DomContentLoaded事件来实现，我们只需要注册相应的事件就可以了，而在IE浏览器里则需要模仿实现。

IE浏览器里最早的解决方案是绑定document.onreadystatechange事件，判断readyState是否为complete，但是当页面有iframe时就无法及时触发了（等到iframe加载完毕readyState的值才会变为complete）

而之后有了一种利用 doScroll() 方法来模拟 addDOMLoadEvent 事件的方案，且现在主流的 JavaScript 框架（JQuery、YUI，kissy等）基本都采用的这一解决方案。doScroll判断页面是否可以滚动，如果可以滚动，那么就意味着文档加载完毕了。

kissy里面的判断：

doScroll

标准浏览器的绑定：

这里要说明的是在触发了DomContentLoaded这个事件之后就会取消该事件，避免反复触发，之后就去执行绑定在ready方法上的所有函数了

而IE浏览器下的绑定大同小异，换成了onreadystatechange而已

但是仅仅绑定是不够的，下面还要判断是否在有iframe的页面内，在iframe中则通过document的onreadystatechange来实现，否则通过不断测试doScroll是否可用来实现。不过经测试（本人未测试过），即使是在iframe中，doScroll依然有

如何在IE浏览器里模仿DomContentLoaded的更多相关文章

  1. 利用doScroll在IE浏览器里模仿DOMContentLoaded

    稍微了解一点框架的事件绑定的都知道 window.onload 事件需要在页面所有内容(包括图片.flash.iframe等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本,而各大框 ...

  2. 微信浏览器里location.reload问题

    微信浏览器里location.reload问题会导致有时候post数据丢失.建议不要用此方式,尽量ajax方式获取或不要为了获取新的UI而刷新页面 2015-12-26 00:51:34array ( ...

  3. VS编辑代码的时候，都会自动在资源浏览器里将文件所在项目展开

    如何设置VS编辑代码的时候,都会自动在资源浏览器里将文件所在项目展开 工具-选项-项目和解决方案-常规-在解决方案资源管理器中跟踪活动项(C)

  4. 教你在浏览器里做出EXCEL的效果

    在浏览器里做出EXCEL的效果,复制.粘贴.设置公式.双击编辑等效果,如果自己开发的话,比较麻烦,建议使用成熟的插件.这里介绍使用智表ZCELL插件,实现用户快捷操作. 首先下载插件,引入到页面中,一 ...

  5. 简单配置，让ES6脚本在浏览器里飞

    如果你只是想学习ES6语法,找个地方练习下写法.不想看环境如何搭配,就想简单的学习,那有两种简单的方式. 1.在Chrome浏览器里直接F12调出控制台   2.在浏览器里跑引用ES6的HTML页面 ...

  6. 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...

  7. IndexedDB:浏览器里内置的数据库(转)

    出处;http://www.webhek.com/indexeddb/ IndexedDB是HTML5规范里新出现的浏览器里内置的数据库.对于在浏览器里存储数据,你可以使用cookies或local ...

  8. 用php命令执行php脚本报错，在浏览器里执行却正常。

    写了一个Php脚本,里面用到了PDO连接数据库,但是所有的库都已经安装,在浏览器里执行完全正常,但是写到批处理文件里用php命令去执行的时候却报错找不到驱动,很奇怪. 经查找得知原来php命令与浏览器 ...

  9. ABAP的语法高亮是如何在浏览器里显示的

    这篇文章的原文我发表在SAP官方社区上:https://blogs.sap.com/2018/03/09/how-abap-syntax-highlight-is-implemented-in-web ...

随机推荐

  1. Hdu-6242 2017CCPC-哈尔滨站 M.Geometry Problem 计算几何 随机

    题面 题意:给你n个点,让你找到一个圆,输出圆心,和半径,使得有超过一半的点刚好在圆上.n<=1e5,题目保证了有解 题解:刚开始看着很不可做的样子,但是多想想,三点确定一个圆,三点啊! 现在有 ...

  2. winFrom线程

    方法--->委托--->BeginInvoke用指定的参数异步执行委托 委托就是我想做什么,而你可以作什么,我就让你去做.

  3. 统计之都 http://cos.name/

    http://cos.name/ IMS:一个洲际人际交流网络(为学生免费提供会员资格) 原文链接:http://cos.name/2014/07/ims-a-cross-continent-huma ...

  4. 还是UVa340

    #include<stdio.h> #define maxn 1010 int main() { int num,a[maxn],i,j,b[maxn]; ; &&num) ...

  5. js 目录树

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 优动漫PAINT漫画和插画方面软件特色

    优动漫PAINT也就是我们常说的clip studio paint(CSP)的中文版本,它是一款功能强大的漫画.插画绘制软件,它搭载了绘制漫画和插画所需的所有功能,包括丰富的笔工具.超强的笔压感应和手 ...

  7. 从无到有创建一个grunt项目

    在安装好grunt的前提下创建一个grunt的项目: 1.首先创建一个项目文件 就叫grunt-project 2.进入这个文件 创建一个index.html 在创建一个js文件,进去创建一个inde ...

  8. Asp.net Core 源码-PagedList<T>

    using System.Collections.Generic; using System.Linq; using System; using System.Linq.Expressions; us ...

  9. [置顶] 来自 HeroKu 的 HTTP API 设计指南(中文版)

    转载:http://get.jobdeer.com/343.get 来自 HeroKu 的 HTTP API 设计指南(中文版) 翻译 by @Easy 简介 本指南中文翻译者为 @Easy ,他是国 ...

  10. 在 vue-test-utils 中 mock 全局对象

    vue-test-utils 提供了一种 mock 掉 Vue.prototype 的简单方式,不但对测试用例适用,也可以为所有测试设置默认的 mock. mocks 加载选项 mocks 加载选项 ...