如何在IE浏览器里模仿DomContentLoaded
稍微了解一点框架的事件绑定的都知道 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的更多相关文章
- 利用doScroll在IE浏览器里模仿DOMContentLoaded
稍微了解一点框架的事件绑定的都知道 window.onload 事件需要在页面所有内容(包括图片.flash.iframe等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本,而各大框 ...
- 微信浏览器里location.reload问题
微信浏览器里location.reload问题会导致有时候post数据丢失.建议不要用此方式,尽量ajax方式获取或不要为了获取新的UI而刷新页面 2015-12-26 00:51:34array ( ...
- VS编辑代码的时候,都会自动在资源浏览器里将文件所在项目展开
如何设置VS编辑代码的时候,都会自动在资源浏览器里将文件所在项目展开 工具-选项-项目和解决方案-常规-在解决方案资源管理器中跟踪活动项(C)
- 教你在浏览器里做出EXCEL的效果
在浏览器里做出EXCEL的效果,复制.粘贴.设置公式.双击编辑等效果,如果自己开发的话,比较麻烦,建议使用成熟的插件.这里介绍使用智表ZCELL插件,实现用户快捷操作. 首先下载插件,引入到页面中,一 ...
- 简单配置,让ES6脚本在浏览器里飞
如果你只是想学习ES6语法,找个地方练习下写法.不想看环境如何搭配,就想简单的学习,那有两种简单的方式. 1.在Chrome浏览器里直接F12调出控制台 2.在浏览器里跑引用ES6的HTML页面 ...
- 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...
- IndexedDB:浏览器里内置的数据库(转)
出处;http://www.webhek.com/indexeddb/ IndexedDB是HTML5规范里新出现的浏览器里内置的数据库.对于在浏览器里存储数据,你可以使用cookies或local ...
- 用php命令执行php脚本报错,在浏览器里执行却正常。
写了一个Php脚本,里面用到了PDO连接数据库,但是所有的库都已经安装,在浏览器里执行完全正常,但是写到批处理文件里用php命令去执行的时候却报错找不到驱动,很奇怪. 经查找得知原来php命令与浏览器 ...
- ABAP的语法高亮是如何在浏览器里显示的
这篇文章的原文我发表在SAP官方社区上:https://blogs.sap.com/2018/03/09/how-abap-syntax-highlight-is-implemented-in-web ...
随机推荐
- Eclipse-Error:笔记-1
ylbtech-Eclipse-Error:笔记-1 1.返回顶部 1. Whitelabel Error PageThis application has no explicit mapping f ...
- ASP.NET MVC4入门到精通系列目录汇总(转)
序言 最近公司在招.NET程序员,我发现好多来公司面试的.NET程序员居然都没有 ASP.NET MVC项目经验,其中包括一些工作4.5年了,甚至8年10年的,许多人给我的感觉是:工作了4.5年,We ...
- 3.TinkPHP中的模型
1.配置数据库的连接设置 数据库的连接配置项可以在系统的主配置文件中 2.什么是模型? 模型是MVC 三大组成部分的M,作用是负责与数据表达额交互(CRUD) 3.模型的创建 命名规范:不带前缀的标明 ...
- 1.Ventuz 介绍
Ventoz能做什么? Ventuz是一款实时图文包装内容创作.制作和播出控制软件.Ventuz专注于高端视听内容的制作,包括交互展示和大型活动.视频墙.广播电视在线包装及演播室舞台及灯光控制等领域. ...
- mysql连接出现error node【1045】
第一步:在my.ini下找到mysqlid.在后边添加skip-grant-tables 第二步:重新启动mysql服务 第三步:重新设置密码 第四步: 将skip-grant-tables删除掉,保 ...
- python第三方库 pip 豆瓣源
pip install xxx -i http://pypi.douban.com/simple/ xxx 为包名
- TortoiseSvn问题研究(一)
问题描述 今天在工作中遇到一个SVN方面的问题,牵扯出使用SVN这一段时间的一系列问题. 具体来说,是这样的: 上周五有上线分支,自己的分支需要merge: 很多项目小组都在开发这个项目,再往前好像也 ...
- css table布局
表格布局有两种方式: 1.HTML Table(<table>标签)和 2. CSS Table(display:table 等相关属性). HTML Table是指使用原生的<ta ...
- phpstudy不显示目录列表---设置方法
打开phpstudy,显示的项目文件路径不见了,其实是phpstudy的设置问题.以下是设置方法. 并将一下几个文件删除即可
- 执行opatch apply 报错 OPatch failed with error code 73
.执行opatch apply 报错 OPatch failed [oracle@ora_11g 14275605]$ /opt/oracle/product/db_1/OPatch/opatch a ...