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測試