html 中页面的加载顺序以及window.onload 与body 标签里面的onload事件的对比

最新推荐文章于 2023-03-16 09:40:20 发布

春馨梦

最新推荐文章于 2023-03-16 09:40:20 发布

阅读量1.3w

点赞数 4

分类专栏：前端文章标签： JavaWeb window.onload body标签onload事件

本文链接：https://blog.csdn.net/tannongchun/article/details/62881599

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

html 中页面的加载顺序以及window.onload 与body 标签里面的onload事件的对比。

情况一：head 、body 以及body 外面的window.onload采用匿名方法。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>onload 的顺序判断</title>
</head>
<script type="text/javascript">
    /**
     *  加载页面 Body
     */
function loadBody(){
console.log("load ......  body ");

}
console.log("load ......  header  javascript  ");、

// 匿名方法
window.οnlοad=function (){
        console.log("load ......  header window javascript ");
    };
</script>

// body 加载事件
<body  οnlοad="loadBody()">

<div ></div>

<script type="text/javascript">
    console.log("load ......  body  javascript  ");

    window.οnlοad=function(){
        console.log("load ......  body window javascript ");
    }
</script>
</body>
// body 外面
<script type="text/javascript">
    console.log("load ......  body outer  javascript(footer)  ");
    // body 下面的javascript 脚本
    window.οnlοad=function(){
        console.log("load ......  body outer  javascript(footer)  window  ");
    }
</script>
</html>

执行结果：

1.body 的onload方法没有执行。

2.head标签里面 window.onload 脚本没有执行。

情况二：head 、body 以及body 外面的window.onload不采用匿名方法。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>onload 的顺序判断</title>
</head>
<script type="text/javascript">
    /**
     *  加载页面 Body
     */
function loadBody(){
console.log("load ......  body ");

}

console.log("load ......  header  javascript  ");

    function loadHeaderWindow(){
        console.log("load ......  header window javascript ");
    }

    window.οnlοad=loadHeaderWindow();
</script>
<body  οnlοad="loadBody()">

<div ></div>

<script type="text/javascript">
    console.log("load ......  body  javascript  ");

    function loadHeaderWindow1(){
        console.log("load ......  body window javascript ");
    }

    window.οnlοad=loadHeaderWindow1();
</script>
</body>

<script type="text/javascript">
    console.log("load ......  body outer  javascript(footer)  ");
    // body 下面的javascript 脚本
    function loadHeaderWindow2(){
        console.log("load ......  body outer  javascript(footer)  window  ");
    }
    window.οnlοad=loadHeaderWindow2();
</script>
</html>

执行结果：

1.body 的onload方法没有执行。

2.head 、body 以及body 外面的window.onload都执行。

情况三：body 以及body 外面的 window.onload去掉、header里面采用非匿名方法。则body 标签里面onload 方法会依次执行。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>onload 的顺序判断</title>
</head>
<script type="text/javascript">
    /**
     *  加载页面 Body
     */
    function loadBody(){
        console.log("load ......  body ");

    }

    console.log("load ......  header  javascript  ");

    function loadHeaderWindow(){
        console.log("load ......  header window javascript ");
    }

    window.οnlοad=loadHeaderWindow();
</script>
<body  οnlοad="loadBody()">

<div ></div>

<script type="text/javascript">
    console.log("load ......  body  javascript  ");

//    function loadHeaderWindow1(){
//        console.log("load ......  body window javascript ");
//    }
//
//    window.οnlοad=loadHeaderWindow1();
</script>
</body>

<script type="text/javascript">
    console.log("load ......  body outer  javascript(footer)  ");
    // body 下面的javascript 脚本
//    function loadHeaderWindow2(){
//        console.log("load ......  body outer  javascript(footer)  window  ");
//    }
//    window.οnlοad=loadHeaderWindow2();
</script>
</html>

执行结果如下：

1、head 标签和body 标签里面js 脚本先执行。最后执行body 标签onload事件。

情况四：body 以及body 外面的window.onload去掉、head标签里面window.onload 事件采用匿名方法。则火狐浏览器下面head标签里面的window.onload 事件不执行。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>onload 的顺序判断</title>
</head>
<script type="text/javascript">
    /**
     *  加载页面 Body
     */
    function loadBody(){
        console.log("load ......  body ");
    }
    console.log("load ......  header  javascript  ");
    window.οnlοad=function(){
        console.log("load ......  header window javascript ");
    };
</script>
<body  οnlοad="loadBody()">
<div ></div>

<script type="text/javascript">
    console.log("load ......  body  javascript  ");

//    function loadHeaderWindow1(){
//        console.log("load ......  body window javascript ");
//    }
//
//    window.οnlοad=loadHeaderWindow1();
</script>
</body>

<script type="text/javascript">
    console.log("load ......  body outer  javascript(footer)  ");
    // body 下面的javascript 脚本
//    function loadHeaderWindow2(){
//        console.log("load ......  body outer  javascript(footer)  window  ");
//    }
//    window.οnlοad=loadHeaderWindow2();
</script>
</html>

执行结果：

1.火狐浏览器(Firefox)下head标签里面window.onload （采用匿名方法）事件不执行。

2.谷歌浏览器（chrome ）下window.onload和body 标签onload事件最新依次执行。

以上表述如有不正之处，烦请指正。

春馨梦

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html 中页面的加载顺序以及window.onload 与body 标签里面的onload事件的对比

html 中页面的加载顺序以及window.onload 与body 标签里面的onload事件的对比。情况一：head 、body 以及body 外面的window.onload采用匿名方法。 onload 的顺序判断 /** * 加载页面 Body */function loadBody(){console.log("load
复制链接

扫一扫

专栏目录