如何在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依然有

时间： 2024-08-30 15:46:12

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

如何在CSS文件里加入变量

[摘自http://blog.itpub.net/285892/viewspace-573357] 前言 这个技巧说来很简单.我们让Apache把任何stylesheet重定向到一个指定的PHP脚本.该脚本会一行行读取stylesheet的内容,找到并替换任何用户自定义的变量,最终会重新生成一个CSS样式表.浏览器不会发觉到有什么地方不同.在后面,我们会讨论如何缓存生成的最终结果避免加大CPU的负载. 请注意,这个教程需要读者懂得一些基本的PHP(OOP).Apache和HTTP知识. Norm

IndexedDB: 浏览器里内置的数据库简介

一.概述: 所有的应用程序都需要"数据"支持.对于大多数的Web应用程序来说,数据是在服务器端进行组织和整理,然后由客户端(浏览器端)通过网络请求获取.随着浏览器的处理能力不断增强,可以在浏览器端存储和操纵应用程序需要的数据,因此越来越多的网站开始考虑,将大量数据储存在本地客户端,这样可以减少用户等待从服务器端获取数据的时间. 现有的浏览器端数据储存方案,都不适合储存大量数据.Cookie不超过4KB,且每次请求都会发送回服务器端:Window.name属性缺乏安全性,且没有统一的标准

微信浏览器里location.reload问题

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

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

IndexedDB是HTML5规范里新出现的浏览器里内置的数据库.对于在浏览器里存储数据,你可以使用cookies或local storage,但它们都是比较简单的技术,而IndexedDB提供了类似数据库风格的数据存储和使用方式.存储在IndexedDB里的数据是永久保存,不像cookies那样只是临时的.IndexedDB里提供了查询数据的功能,在online和offline模式下都能使用.你可以用IndexedDB存储大型数据. IndexedDB里数据以对象的形式存储,每个对象都有一个k

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

copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他代码... resolv

如何在 vue 项目里正确地引用 jquery

转载 2016年11月13日 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他代码... resolve: { extensions: ['', '.js', '.vue'], fa

在浏览器里使用SAPGUI里的SE80

效果如图:点击Fiori launchpad的SE80对应的tile: 即可在浏览器里打开SE80 具体步骤 (1). 在后台找到Fiori catalog page ID: SAP_FIORI_EXTENSIBILITY (2). 打开Open Fiori Launchpad Designer, 根据前一步找到的ID搜索出catalog. 创建一个新的tile: 维护如下数据: 保存,如下url会自动生成. (3). 创建一个新的目标映射关系: 保存映射关系 (4). 将前述步骤创建的tile

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

这篇文章的原文我发表在SAP官方社区上:https://blogs.sap.com/2018/03/09/how-abap-syntax-highlight-is-implemented-in-webide-launched-via-browser/ 在S/4HANA里,我们现在能在浏览器里写ABAP了,并且支持语法高亮. 你也许会问,ABAP的语法高亮是如何在浏览器里显示的?下面跟我一起来通过调试的方式自己找到问题的答案. (1). 在浏览器里敲个ABAP的关键字,比如data.发现被高亮了.

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

在浏览器里做出EXCEL的效果,复制.粘贴.设置公式.双击编辑等效果,如果自己开发的话,比较麻烦,建议使用成熟的插件.这里介绍使用智表ZCELL插件,实现用户快捷操作. 首先下载插件,引入到页面中,一共4个文件,包括jquery 基础文件,插件和样式文件. <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script type="text/javascrip