<div style="text-indent: 2em;">

如何使用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();

点击这里运行