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

最新推荐文章于 2024-05-17 15:14:31 发布

rcom10002

最新推荐文章于 2024-05-17 15:14:31 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： function safari javascript firefox opera 浏览器

本文链接：https://blog.csdn.net/rcom10002/article/details/7039499

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何在不同浏览器环境下确保DOM加载完成后执行特定JavaScript函数的方法。包括window.onload、DOMContentLoaded及针对IE、Firefox、Opera和Safari等浏览器的兼容性解决方案。

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

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

window.onload=function(){  walkmydog()}

Firefox & Opera下的替换方案：

if (document.addEventListener)
  document.addEventListener("DOMContentLoaded", walkmydog, false)

IE下的替换方案，：

if (document.all && !window.opera){ //Crude test for IE
//Define a "blank" external JavaScript tag
  document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>')
  var contentloadtag=document.getElementById("contentloadtag")
  contentloadtag.onreadystatechange=function(){
    if (this.readyState=="complete")
      walkmydog()
  }
}

Firefox & Opera & IE综合方案：

var alreadyrunflag=0 //flag to indicate whether target function has already been run

if (document.addEventListener)
  document.addEventListener("DOMContentLoaded", function(){alreadyrunflag=1; walkmydog()}, false)
else if (document.all && !window.opera){
  document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>')
  var contentloadtag=document.getElementById("contentloadtag")
  contentloadtag.onreadystatechange=function(){
    if (this.readyState=="complete"){
      alreadyrunflag=1;
      walkmydog()
    }
  }
}

window.onload=function(){
  setTimeout("if (!alreadyrunflag) walkmydog()", 0);
}

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

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

if(/Safari/i.test(navigator.userAgent)){ //Test for Safari
  var _timer=setInterval(function(){
  if(/loaded|complete/.test(document.readyState)){
    clearInterval(_timer)
    walkmydog() // call target function
  }}, 10)
}

这种方案是就是单纯的检测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。其中添加了点自己理解。