为什么window.onload=func()会出错

最新推荐文章于 2024-04-15 15:42:58 发布

Ben我要上天

最新推荐文章于 2024-04-15 15:42:58 发布

阅读量1.6k

点赞数 3

分类专栏：前端学习文章标签： javascript 浏览器 dom window onload

本文链接：https://blog.csdn.net/github_35385605/article/details/51745740

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

window.οnlοad=func()运行时发生了什么

作为javascript初学者，在学习使用 window.onload 事件调动函数时，常常会大意地写成：

window.onload = func();//当 func() 中需要使用DOM读取网页节点时，必定报错

当 func() 中需要使用DOM读取网页中的节点时，func()无法正常运行，且浏览器报错。但使用下面正确的格式，就不会有问题：

window.onload = func;//正常运行

为什么一个括号会有这么大的影响，window.οnlοad=func()语句在运行中到底发生什么？

举个栗子分析这个问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">

            function changeColorById(){
                var ele=document.getElementById("demo");
                ele.style.color="red";
            }

            function bodyHaveOrNot(){
                document.body.style.backgroundColor="yellow";
            }

            window.onload = changeColorById();

        </script>
    </head>
    <body>
        <a href="#" id="demo">测试</a>
    </body>
</html>

chrome报错：
Uncaught TypeError: Cannot read property ‘style’ of null

进一步debug，会发现实际上浏览器在执行这个函数时，根本无法读取到 id=”demo”的 a 元素节点。修改17行代码为：

            window.onload = bodyHaveOrNot();

当这个函数被执行时，body元素根本还没有加载出来。实际上，上面的代码，让这个函数在页面加载完毕前就开始执行了,而此时此刻文档的DOM结构还没有形成。

猜想：执行func()后，将返回值赋给window.onload事件

window.onload=func;

当等式右边没有括号时，该语句把func函数赋值给了window.onload事件。当页面加载完毕，window.onload触发，开始执行func函数。
当等式右边有括号时，该语句把func函数执行后的返回值赋值给window.onload事件。所以在页面加载完成之前，func()必须要事先执行并生成一个返回值给window.onload事件，否者当页面加载完成后window.onload事件无内容可以执行。然而页面加载完成前，文档DOM结构尚未形成，无法使用DOM方法读取文档元素，程序报错。

验证：返回个函数看看

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">

            function changeColorById(){
                var ele=document.getElementById("demo");
                ele.style.color="red";
            }

            function getNewFunc(){
                return changeColorById;    
            }

            function getNewNum(){
                return 5;
            }

            function showWindowOnLoad(){
                alert(window.onload);
            }

            window.onload = getNewFunc();//执行getNewFunc()函数，尝试返回一个新的函数给该事件
        </script>
    </head>
    <body>
        <a href="#" onclick="showWindowOnLoad()" id="demo">测试</a>
    </body>
</html>

运行无报错，链接颜色变为红色（说明getNewFunc函数返回给window.onload的新函数已被执行），点击“测试”链接弹出window.onload的值：

果然，当等式右边函数带有括号时，该函数将在页面被加载前执行并将返回值传给window.onload事件；当页面加载完毕，触发window.onload事件——立即执行刚才的返回值

附加实验：试试返回非函数

使用getNewNum()代替getNewFunc()时，无报错，点击“测试”弹出window.onload的值：

猜测：window.onload只能被赋予函数，其他类型无法赋予，只能为空

总结

window.onload()=func()语句的本意是，将func函数执行后的返回值传递给window.onload事件。这意味着func函数将在window.onload事件触发前执行，也就是说在窗口加载完毕前执行，而此时页面文档尚未加载完毕、DOM结构没有成型。当func函数需要利用DOM方法访问节点时（比如某个标签）将会出现错误。

以上是个人学习理解，思考可能存在不严谨的地方，欢迎学习交流！

原创博文，转载请注明出处

Ben我要上天

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
为什么window.onload=func()会出错

目录 [TOC]window.onload=func()运行时发生了什么作为javascript初学者，在学习使用 window.onload 事件调动函数时，常常会大意地写成：window.onload = func();//当 func() 中需要使用DOM读取网页节点时，必定报错当 func() 中需要使用DOM读取网页中的节点时，func()无法正常运行，且浏览器报错。但使用下面正确的格式
复制链接

扫一扫