`
javasogo
  • 浏览: 1821822 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

window.onload的替代方案——DOM状态检测

 
阅读更多

window.onload是非常常用的初始化事件,而该事件所对应的响应函数只有在浏览器将目标页面中所有资源内容全部装载完毕之后才会执行,这里的“所有资源内容”特指图片、音效、iframe所包含的页面等。

下面的例子是使用window.onload方式执行JavaScript脚本:

Firefox & Opera下的替换方案:

IE下的替换方案,:

Firefox & Opera & IE综合方案:

之所以要用window.onload是为了应对那些既不支持DOMContentLoaded也不支持onreadystatechange的浏览器。setTimeout函数的作用是为了保证变量alreadyrunflag在window.onload事件被激活之前已经赋值。因为有时在IE浏览器中,由于要装载资源几乎没有,导致window.onload和onreadystatechange事件同时激活,这样的话,在onload事件做判断时变量alreadyrunflag可能还没有被赋值,这就无法保证程序执行的正确性。所以用setTimeout函数来让onload事件中的判断条件稍微滞后一些,以保证alreadyrunflag可用。

下面是原文中用在Safari中的方案:

这种方案是就是单纯的检测document的状态。至于为什么不使用DOMContentLoaded,可能是和文章所写时的Safari版本有关吧。从http://en.wikipedia.org/wiki/DOM_events可以看出,Safari3.1+就开始支持DOMContentLoaded了,可喜的是IE9也支持了(http://p2b.jp/1269996654,同时支持的还有addEventListener)。不过这种方案也许还会有用,最差也可以帮我们开阔下眼界。
以上内容大部分来自:http://www.javascriptkit.com/dhtmltutors/domready.shtml。其中添加了点自己理解。

分享到:
评论

相关推荐

    脱离document.onload和window.onload的onload事件

    脱离document.onload和window.onload的onload事件,可多次添加加载事件!

    ie中 body onload 和 window onload 解决法案

    在网页开发中,`body.onload` 和 `window.onload` 是两个常见的JavaScript事件处理函数,用于在页面完全加载后执行特定的代码。它们都是用来确保在执行任何操作之前,页面的所有资源(包括HTML、CSS、JavaScript、...

    window.onload

    ### window.onload 与 insertAfter() 方法详解 #### 一、概述 在网页开发过程中,`window.onload` 和 `insertAfter()` 方法是两个非常实用且重要的技术点。它们可以帮助开发者更好地控制页面加载流程以及动态地...

    window.open打开新窗口,不被拦截的方法

    <body onload="window.parent.opener=null;window.close();"> ``` 这段代码的作用是在页面加载完成后立即关闭当前窗口。需要注意的是,这种方式可能也会受到浏览器的弹出窗口拦截机制的影响。为了确保兼容性更好...

    document.ready和window.onload.docx

    windows

    IE11没有window.attachEvent方法处理方法

    window.attachEvent('onload', function() { console.log('页面加载完成'); }); } ``` #### 4. 结论 通过以上方法,我们可以有效地解决IE11不支持`attachEvent`的问题。在实际开发中,建议尽可能采用现代浏览器...

    window.open()参数

    window.open() 参数大全 window.open() 是一个常用的 JavaScript 函数,它可以打开一个新的浏览器窗口,以供用户访问其他网页或显示信息。在本文中,我们将详细介绍 window.open() 函数的参数大全,并提供一些实用...

    window.open全攻略

    【Window.open()详解】 在JavaScript中,`window.open()` 是一个非常重要的方法,它用于打开一个新的浏览器窗口或者重载已有的窗口。以下是对这个方法的详细介绍: ### 1. 基本用法 最简单的`window.open()` 使用...

    window.open参数详解.txt

    ### window.open()函数详解 在Web开发中,`window.open()`是一个非常实用的JavaScript函数,用于在新的浏览器窗口或标签页中打开一个指定的URL。它不仅能够打开新窗口,还可以控制新窗口的属性,如大小、位置以及...

    window.addEventListener来解决让一个js事件执行多个函数

    当需要一个事件触发时执行多个函数,单纯地使用`window.onload`或元素的`onclick`等事件处理方式可能会遇到问题,特别是在需要同时处理多个事件处理器时。这时,`window.attachEvent`和`window.addEventListener`就...

    JavaScript中Window.open参数

    ### JavaScript中Window.open参数详解 #### 1. 最基本的弹出窗口代码 在Web开发中,`window.open` 方法是非常实用的一个功能,它可以用来创建一个新的浏览器窗口或标签页,并加载指定的URL。最简单的使用方式如下...

    window.open的参数详细应用

    ### window.open 的参数详细应用 在网页开发过程中,`window.open` 方法被广泛应用于打开新的浏览器窗口或标签页。此方法对于实现弹出窗口、预览功能等具有重要作用。下面将详细探讨 `window.open` 方法的各项参数...

    Jqyery中同等与js中windows.onload的应用

    关于在页面中放置脚本,将DOM操作的代码放在 `window.onload` 或 jQuery 的 `document ready` 事件中,可以确保元素在执行相关操作时已经存在。例如,下面的代码绑定了按钮点击事件: ```html <div id="divInfo">...

    jQuery(document).ready(function($) { });的几种表示方法

    总结来说,`jQuery(document).ready()`提供了一种灵活且高效的处理DOM就绪的方式,而`window.onload()`和`body.onload`更适用于需要等待整个页面加载的场景。理解这些不同方法的用法和区别,可以帮助开发者更有效地...

    js 某个页面监听事件渲染完毕的时间.pdf

    为了更快地响应页面DOM(文档对象模型)的就绪状态,开发者通常会使用jQuery的`$(document).ready`,或简写为`$(function() {})`。这个事件在DOM结构构建完成时触发,而不考虑外部资源是否加载完毕。相比`onload`,`...

    实现在HTML页面加载完毕后运行js方法.docx

    `window.onload` 事件是在页面中的所有元素都已经加载完毕后触发的,而 `$(document).ready()` 方法是在 DOM 加载完毕后执行的,虽然这也意味着页面中的所有元素都可以被 JavaScript 代码所操作,但是,并不意味着...

    js之onload事件的一点使用心得

    在JavaScript编程中,页面加载完成后的操作常常需要用到一个特定的事件处理器——onload事件。本文将深入探讨onload事件在JavaScript中的使用心得,以及如何正确地利用这一事件来确保相关代码在页面加载完毕后执行。...

    js的image onload事件使用遇到的问题

    标题中所提到的知识点是“js的image onload事件使用遇到的问题”,这涉及到JavaScript中Image对象的onload事件处理。在Web前端开发中,onload事件是一个非常重要的概念,主要用于处理图片或者其他资源加载完成后的...

    DHTML.Utopia.Modern.Web.Design.Using.JavaScript.DOM.2006.pdf

    ### DHTML.Utopia.Modern.Web.Design.Using.JavaScript.DOM.2006.pdf #### 知识点一:DHTML技术概览 - **DHTML(Dynamic HTML)**: DHTML 是一种结合了HTML、CSS(层叠样式表)、DOM(文档对象模型)以及客户端...

Global site tag (gtag.js) - Google Analytics