js里面windows.onload函数不执行

时间 2019-12-22

标签里面 windows.onload windows onload 函数执行栏目 JavaScript 繁體版

原文原文链接

当我在script标签内写完window.onload=function(){}函数时，可是在运行界面是并无运行这个函数，此我便在网上找了一下，并总结了如下几种状况javascript

只有一个函数window.onload=functtion(){}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="./js/jquery-3.3.1.js"></script>
    <script type='text/javascript'>

        window.onload = function () {
            alert("页面加载完成====》onload");
        }

    </script>
</head>
<body>
     /***/
</body>
</html>

页面加载完毕以后完美运行此函数html

在window.onload=functtion(){}函数以外，body还有onload属性，而且属性值为"after()"

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="./js/jquery-3.3.1.js"></script>
    <script type='text/javascript'>

        window.onload = function () {
            alert("页面加载完成====》onload");
        }

        function after() {
            alert("页面after====》onload");
        }
    </script>
</head>

     <body onload="after()">

</body>
</html>

此时只会执行body元素里面的onload属性对应的函数，不会去执行window.onload事件。因此，当指定了body的onload之后，window.onload就无效了java

window.onload=functtion(){}函数出如今body属性的后面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="./js/jquery-3.3.1.js"></script>
    <script type='text/javascript'>

        function after() {
            alert("页面after====》onload");
        }
    </script>
</head>

     <body onload="after()">

</body>
  <script type='text/javascript'>

        window.onload = function () {
            alert("页面加载完成====》onload");
        }

    </script>
</html>

此时执行的函数就是window.onload事件对应的函数jquery

关于执行顺序的小测试

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>   

<head>   
    <script type="text/javascript"> 
       alert('a');

       window.onload=function () {  
       alert('b');  
         } ;

       alert('c');
   </script> 
   </head>   
   <body onload="alert('d');">  

   </body>   

</html>

弹出层结果为：a、c、d函数

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>   

<head>   

   </head>   
   <body onload="alert('d');">  

   </body>   
     <script type="text/javascript"> 
       alert('a');

       window.onload=function () {  
       alert('b');  
         } ;

       alert('c');

   </script> 
</html>

弹出层结果为：a、c、b测试

总结

onload事件只能执行一个
在程序中设置一个onload的事件时

只设置body onload属性中能够响应事件
只设置window.onload函数中也能够响应事件

在程序中设置两个onload的事件时

window.onload在head头部中出现的状况)只执行body onload属性的内容
window.onload出如今body onload属性的后面的状况.等加载完body的页面,再执行onload事件,后面onload事件是能够覆盖前面的body onload属性.

不管顺序怎么样,除了onload事件的代码,都是按照顺序（从上到下）来进行的

备注：onunload：用户退出界面时的事件spa

js里面windows.onload函数不执行

只有一个函数window.onload=functtion(){}

在window.onload=functtion(){}函数以外，body还有onload属性，而且属性值为"after()"

window.onload=functtion(){}函数出如今body属性的后面

关于执行顺序的小测试

总结

onload事件只能执行一个

在程序中设置一个onload的事件时

在程序中设置两个onload的事件时

不管顺序怎么样,除了onload事件的代码,都是按照顺序（从上到下）来进行的