window.onload = function ()是什么意思

`window.onload` 是一个事件处理函数，表示在页面的所有资源都加载完成后，会执行其中的代码。具体来说，当浏览器加载完所有的 HTML、CSS、JavaScript、图片等资源后，就会触发 `window.onload` 事件。

在 `window.onload` 中编写的 JavaScript 代码，可以确保所有的 DOM 元素都已经被加载完毕，可以对这些元素进行操作，避免未加载完毕就进行操作导致出错的情况。

相关问题

window.onload = function(

### 正确设置和使用 `window.onload` 函数

在 JavaScript 中，`window.onload` 是一个事件处理程序属性，用于指定当整个页面完全加载完成后要运行的脚本。这包括所有的依赖资源如样式表、图像和其他媒体文件。

如果直接给 `window.onload` 赋值一个新的函数，则会覆盖之前已经赋好的任何其他 `onload` 处理器[^1]：

// 这种方式会导致后者覆盖前者
window.onload = one;
window.onload = two; // 后者覆盖了前者, 只有 "two" 会被触发

为了确保可以注册多个负载事件处理器而不互相干扰，应该采用一种方法来安全地附加额外的功能而不会丢失现有的行为。下面是一个实用的例子展示如何实现这一点:

#### 安全添加多个 `onload` 事件处理器

通过创建辅助函数 `addLoadEvent` 来管理这些回调，这样就可以多次调用此函数并累积所有希望被执行的任务列表，而不是简单替换掉原来的 `onload` 属性值[^2]:

function addLoadEvent(func){
    var oldOnload = window.onload;

    if (typeof oldOnload !== 'function'){
        window.onload = func;
    } else {
        window.onload = function(){
            oldOnload();
            func();
        };
    }
}

// 使用自定义的帮助函数添加两个不同的操作
addLoadEvent(function (){ console.log('First task completed'); });
addLoadEvent(function (){ console.log('Second task also done!'); });

这种方法允许开发者在一个页面上轻松地安排一系列按顺序执行的动作，在不破坏原有逻辑的前提下扩展功能。

值得注意的是，虽然上述技术有效解决了多监听器的问题，但在现代浏览器环境下推荐使用更灵活且不易出错的方式——即利用 `addEventListener()` 方法来订阅 `load` 事件，它支持同一类型的多个独立监听器，并且语法更加直观清晰[^3]。

对于那些熟悉 jQuery 的开发人员来说，也可以考虑使用其提供的 `.ready()` 或简化的 `$()` 形式的文档就绪状态检测机制作为替代方案之一[^4]。

window.onload = function ()

window.onload是一个事件，在文档加载完成后能立即触发，并且能够为该事件注册事件处理函数。通过将要对对象或者模块进行操作的代码存放在处理函数中，可以确保这些代码在页面加载完成后执行。例如，使用window.onload来改变一个元素的颜色，可以这样写：window.onload = function (){ document.getElementById("s").style.color="green"; }; 这段代码会在页面加载完成后，将id为"s"的元素的文字颜色改为绿色。