稍微了解一点框架的事件绑定的都知道 window.onload 事件须要在页面全部内容(包括图片、flash、iframe等)加载完后,才执行,但每每咱们更但愿在 DOM 一加载完就执行脚本,而各大框架都提供了这样的方法,今天就讨论下其中的原理。浏览器
标准浏览器都提供了一个DomContentLoaded事件来实现,咱们只须要注册相应的事件就能够了,而在IE浏览器里则须要模仿实现。框架
IE浏览器里最先的解决方案是绑定document.onreadystatechange事件,判断readyState是否为complete,可是当页面有iframe时就没法及时触发了(等到iframe加载完毕readyState的值才会变为complete)函数
而以后有了一种利用 doScroll() 方法来模拟 addDOMLoadEvent 事件的方案,且如今主流的 JavaScript 框架(JQuery、YUI,kissy等)基本都采用的这一解决方案。doScroll判断页面是否能够滚动,若是能够滚动,那么就意味着文档加载完毕了。测试
kissy里面的判断:spa
doScrollblog
标准浏览器的绑定:事件
这里要说明的是在触发了DomContentLoaded这个事件以后就会取消该事件,避免反复触发,以后就去执行绑定在ready方法上的全部函数了图片
而IE浏览器下的绑定大同小异,换成了onreadystatechange而已ip
可是仅仅绑定是不够的,下面还要判断是否在有iframe的页面内,在iframe中则经过document的onreadystatechange来实现,不然经过不断测试doScroll是否可用来实现。不过经测试(本人未测试过),即便是在iframe中,doScroll依然有文档