<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();