JavaScript window.onload事件的用法（附带实例）

window.onload 事件会在页面元素完全载入后执行，在这里添加页面元素的操作代码会比较安全，可以避免因页面没有完全载入而产生的错误。一般情况下，会在此事件中添加页面的初始化代码。

实际开发过程中，onload 事件中可能需要添加多个初始化函数，可以参考下面封装的 addWinLoadFunc() 函数（/lib/js/common.js）：

function addWinLoadFunc(fn) {
    if (typeof window.onload == "function") {
        var oldFn = window.onload;
        window.onload = function () {
            oldFn();
            fn();
        };
    } else {
        window.onload = fn;
    }
}

代码中，addWinLoadFunc(fn) 函数用于向 window.onload 事件添加函数。

首先判断 window.onload 是否是函数类型，即是是否已经添加了函数：

如果已添加过函数，使用 oldFn 对象备份 window.onload 中的函数，然后将 window.onload 设置为新的函数，新函数中需要调用 oldFn 和参数带入的 fn 函数；
如果 window.onload 不是函数类型，则直接将参数 fn 赋值给 onload 事件。

在页面中添加多个初始化函数时，可以参考下面的代码：

<!doctype html>
<html>
<head>
     <meta charset="utf-8" />
     <title></title>
</head>
<body>
</body>
</html>
<script src="/lib/js/common.js"></script>
<script>
    // 三个初始化函数
    function init1() {
        alert("init1");
    }
    function init2() {
        alert("init2");
    }
    function init3() {
        alert("init3");
    }

    // 添加到 onload 事件
    addWinLoadFunc(init1);
    addWinLoadFunc(init2);
    addWinLoadFunc(init3);
</script>

这里共向 window.onload 事件添加了三个函数，页面加载后会显示三个消息对话框：

JavaScript window.onload事件的用法（附带实例）

相关文章