如何使用JavaScript来判断当前文档有没有加载完成

17 December 2009 Jeff 沙滩脚印

如何使用JavaScript来判断当前页面（即当前HTML文档）是否已经另载完成了呢？有人提出如下方案(此方案来自http://faq.csdn.net/read/216705.html)：

function on(){ 
if ( window.onload ) 
{ 
alert( "page onload." ); 
} 
else{ 
window.setTimeout( on, 1000); 
} 
} 
on();

点击这里运行

可惜的是，我在Google Chrome浏览器测试后发现以上代码不能正常工作。因为在HTML文档加载完成之前，window.onload的值是undefined，在加载完成之后，如果仅用以上代码，它会是null，那么通过if(window.onload)来判断，会发现页面一直没有加载完成，于是每过一秒再检查一次，如此直到永远，都不会发现页面已经加载完成。

只有当你为window.onload添加了事件处理函数之后，window.onload的值才不为null。比如在<body>标签中添加onload="handler();"。

正确的解决方案应该是，在页面加载完成后，给window对象设置一个通知变量，然后通过检查该通知变量，就可以知道当前页面是否加载完成了。如下：

// wantToDoSth()是一个必须在当前页面加载完成后才能正常工作的函数
function wantToDoSth() {
	if (window.isReady) {
		// 正式的工作 ...
		alert(window.isReady);
	} else {
		setTimeout(wantToDoSth, 1000);
	}
}

wantToDoSth();

addEventHandler(window, 'load', function() {
	// 就是在这里设置好通知变量，作为其他函数可以使用的“钩子”
	window.isReady = true;
});

// 以下函数用来给window对象的load事件添加事件处理函数。
function addEventHandler(oTarget, sEventType, fnHandler, vArgument /* optional */) {
    //# 生成handler函数
    var handler;
    if (typeof (vArgument) == 'undefined') {
        handler = fnHandler;
    } else {
        handler = function() {
            fnHandler(vArgument);
        };
    }
    if (oTarget.addEventListener) {         // for DOM-compliant browsers
        oTarget.addEventListener(sEventType, handler, false);
    } else if (oTarget.attachEvent) {       // for IE
        oTarget.attachEvent("on" + sEventType, handler);
    } else {                                // for all others
        oTarget["on" + sEventType] = handler;
    }
}

点击这里运行

还有一个方法，就是检查 window.document.body 属性，如果它可以使用了，那么，在大部分情况下，这时都可以使用 JavaScript 来操作 DOM 对象了，也就相当于整个 HTML 文档已经加载结束了。即

// wantToDoSth()是一个必须在当前页面加载完成后才能正常工作的函数
function wantToDoSth() {
	if (window.document.body) {
		// 正式的工作 ...
		alert('好了');
	} else {
		setTimeout(wantToDoSth, 1000);
	}
}

wantToDoSth();

点击这里运行

Tags :

Add comment

Loading