JavaScript的window.onload事件的理解

zhangsan3333

已于 2022-05-21 16:25:12 修改

阅读量2.8w

点赞数 20

于 2022-05-21 16:24:33 首次发布

原文链接：https://blog.csdn.net/InJavaWeTrust/article/details/101063519

版权

javascript 前端开发语言

window.onload()的作用

window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。
window.onload() 通常用于元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。

只有一个要执行的函数语法：

window.onload = funcRef;

在页面加载完成后 funcRef 方法会被调用。

有多个要执行的函数语法：

window.οnlοad=function(){
Func1();
Func2();
Func3();
…
}

在页面加载完成后依次执行 Func1、Func2、Func3。

为什么使用 window.onload()?

因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。
我们都知道页面的代码顺序是从上往下进行加载，很多时候我们要对页面中的某一个模块进行操作，这时候我们常常使用javascript代码来进行操作。为了能够保证操作的模块或对象在js代码之前就加载了，我们不得不把js代码放在页面的底端。
但是我们在设计页面的时候，为了把js代码放在一起，或者一个让页面更加简洁的位置，那就有可能出现代码中操作的对象未被加载的情况，那么我们该如何去解决呢？这时候window.onload就被有了存在的意义了。

window.onload是什么？

window.onload是一个事件，在文档加载完成后能立即触发，并且能够为该事件注册事件处理函数。将要对对象或者模块进行操作的代码存放在处理函数中。即：window.onload =function (){这里写操作的代码};

发生要对对象进行，而对象还未被加载，导致相当于无操作的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

    document.getElementById("s").style.color = "green";

    </script>
</head>
<body>

<span id="s">要坚强，当然是选择原谅他啊！！！</span>
</body>
</html>

在这里插入图片描述
使用window.onload()方法处理的情况的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    window.onload  = function () {
    document.getElementById("s").style.color = "green";
}
    </script>
</head>
<body>

<span id="s">要坚强，当然是选择原谅他啊！！！</span>
</body>
</html>