window.onload的作用是在HTML页面加载完成后,再运行被调用的函数。这样可以避免一个现象就是当要运行的函数里包含某个HTML页面元素(如document.getElmentByID)而当函数运行时,该元素却还没被浏览器加载,则此时会因找不到对应元素而出错。
但window.onload在同个页面里只能被使用一次,这就导致了假如你写了如下代码:
window.οnlοad=firstFunction;
window.οnlοad=secondFunction;
那么最终secondFunction会覆盖掉firstFunction,导致无法成功调用firstFunction。
一般情况下解决这个问题采用两类方式,一类是用事件监听器,另一类是用链式事件处理方式。事件监听器会是优先考虑的方式,但由于一些老式浏览器可能无法识别事件监听语句,因此我们在实际操作中可能也需要为用户提供备选的链式事件处理方式。现在开始贴代码:
//实现用window.onload同时调用多个函数,调用顺序是从后往前。前三种用监听器实现,后一种用链式事件处理方式实现。注意:监听器W3C标准方法是addEventListener(非IE浏览器采用此方法),但IE浏览器用attachEvent。
addLoad(firstFunction);
addLoad(secondFunction);
addLoad(thirdFunction);
function addLoad(fn)
{
if (typeof window.addEventListener != "undefined")//判断浏览器是否能够识别window.addEventListener,假如可以,则执行以下代码
{
window.addEventListener("load",fn,false);
}
else if (typeof document.addEventListener != "undefined")//某些浏览器无法识别window.addEventListener,只能识别document.addEventListener,因此要增加这一步判断
{
document.addEventListener("load",fn,false);
}
else if (typeof window.attachEvent != "undefined")//前面两种都无法识别,则判定是否可以识别window.attachEvent
{
window.attachEvent("onload",fn);
}
else//前三种都无法识别,则用这最后一种:老式链式事件处理方式
{
var oldfn=window.onload;
if (typeof window.onload != "function")
{
window.οnlοad=fn;
}
else
{
window.οnlοad=function()
{
oldfn();
fn();
};
}
}
}
function firstFunction()//最先的函数最后运行
{
alert("这是第一个函数")
}
function secondFunction()//第二个运行
{
alert("这是第二个函数")
}
function thirdFunction()//最后的函数最先运行
{
alert("这是第三个函数")
}
程序运行的结果是先后弹出三个对话框。