关于window.onload

最新推荐文章于 2022-05-26 20:43:48 发布

是橘小米呀~

最新推荐文章于 2022-05-26 20:43:48 发布

阅读量519

点赞数 1

分类专栏： javascript 文章标签： javascript 对象脚本文档

本文链接：https://blog.csdn.net/Summer_lover_/article/details/78249799

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

导语：网页中的JavaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能会导致无法获取对象的情况，为了避免这种情况的发生，我们有以下两种解决办法：

1.将脚本代码放在网页的最底端，这样就能确保操作的对象已经加载完成。像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="parent">
        <p id="child">点击此处有彩蛋</p>
    </div>
    <script>
        var child=document.getElementById('child');
        alert(child.innerHTML);
    </script>
</body>
</html>

将JavaScript的代码放在所有内容的最后面，或者放在</body>的外面，或者放在<html> 的外面，都是可以执行到的，因为保证了将上面的所有对象加载完，那么执行JS代码可以获取到啦…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var child=document.getElementById('child');
        alert(child.innerHTML);
    </script>
</head>
<body>
    <div id="parent">
        <p id="child">点击此处有彩蛋</p>
    </div>
</body>
</html>

加载整个文档的时候，加载到js脚本代码了，由于后面的内容还没有加载进来，所以获取不到id为child的元素，所以什么都不会执行…

2.通过window.onload来执行脚本代码。window.onload是一个事件，当文档加载完成后会触发该事件，可以为此事件注册事件处理函数，将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            var child=document.getElementById('child');
            alert(child.innerHTML);
        }

    </script>
</head>
<body>
    <div id="parent">
        <p id="child">点击此处有彩蛋</p>
    </div>
</body>
</html>

以上代码就是为window.onload事件绑定事件处理函数，这里绑定的是一个匿名函数，当然也可以绑定非匿名函数，加上函数名即可。
注意：不能为window.onload事件绑定多个事件处理函数，否则，最后一个会覆盖掉前面所有的函数。如下代码：

window.onload=function a(){}
window.onload=function b(){}

可做如下变通：

window.onload=function(){
    function a(){}
    function b(){}
}

是橘小米呀~

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于window.onload

导语：网页中的JavaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能会导致无法获取对象的情况，为了避免这种情况的发生，我们有以下两种解决办法：1.将脚本代码放在网页的最底端，这样就能确保操作的对象已经加载完成。像这样：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tit
复制链接

扫一扫