稍微了解一点框架的事件绑定的都知道 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. [SCOI 2010] 股票交易

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1855 [算法] 单调队列优化动态规划 [代码] #include<bits/s ...

  2. sublime-text 编译C

    sublime的优点多多. 先下好sublime-text 如果不会下载 在ubuntu 下输入sudo apt-cache search sublime 查找到合适的安装包后apt-get inst ...

  3. nRF52832添加微信硬件接入服务AirSync

    开发环境 SDK版本:nRF5_SDK_15.0.0 芯片:nRF52832-QFAA OS: FreeRTOS 10.0.0 测试APP:AirSyncDebugger  https://iot.w ...

  4. Meson使用

    安装 Meson是基于python3实现,至少需要python3.5才能运行,默认采用ninja作为后端.在Ubuntu下最简单的是通过pip3安装 $ sudo apt-get install py ...

  5. 跨域解决方案之JSONP,通过借助调用百度搜索的API了解跨域案例

    跨域解决方案之JSONP 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web ...

  6. 爬虫之Urllib库的基本使用

    官方文档地址:https://docs.python.org/3/library/urllib.html 什么是Urllib Urllib是python内置的HTTP请求库包括以下模块urllib.r ...

  7. POJ 3613 floyd+矩阵快速幂

    题意: 求s到e恰好经过n边的最短路 思路: 这题已经被我放了好长时间了. 原来是不会矩阵乘法,快速幂什么的也一知半解 现在终于稍微明白了点了 其实就是把矩阵乘法稍微改改 改成能够满足结合律的矩阵&q ...

  8. caffe 参数介绍 solver.prototxt

    转载自 http://blog.csdn.net/cyh_24/article/details/51537709 solver.prototxt net: "models/bvlc_alex ...

  9. Hadoop MapReduce编程 API入门系列之计数器(二十七)

    不多说,直接上代码. MapReduce 计数器是什么?    计数器是用来记录job的执行进度和状态的.它的作用可以理解为日志.我们可以在程序的某个位置插入计数器,记录数据或者进度的变化情况. Ma ...

  10. showdialog

    在C#中窗口的显示有两种方式:模态显示(showdialog)和非模态显示(show). 区别: 模态与非模态窗体的主要区别是窗体显示的时候是否可以操作其他窗体.模态窗体不允许操作其他窗体,非模态窗体 ...