問題描述:
在一個頁面中,我們經常會初始化一下數據,而且會在指定的DOM元素初始化數據,這時候我們就會使用<body onload="fun()">來加載我們的數據。onload指的是在所有的DOM元素都加載完成才會執行JS函數,這為我們初始化動態的加載數據提供很大的幫助。但是有時候我們會發現,<body onload="fun()">中的fun()函數有時候會不執行。下面分析一下onload不執行的原因和解決方法。
問題解決方案:
1.頁面加載時就出現錯誤。
這種是代碼錯誤,可能是在加載DOM元素就報錯,導致無法執行onload。這時候需要處理代碼,查看代碼哪里出錯了。
2.頁面一直在加載
我們在瀏覽器的右下角會瀏覽器正在加載數據,有時間,由於網絡原因(加載慢)或着找不到資源,然后頁面就會一致加載,這時候onload可能就無法執行了。因為,onload是在加載所有DOM元素才會執行的。這時候也是處理代碼,找到無法加載的資源,刪掉或者找其他方式加載。
3.<body onload="fun()">body這個標簽被覆蓋、銷毀(重點)
在寫JSP頁面時,我們經常會用到類似於<jsp:include page="body.jsp"></jsp:include>來包含一個新頁面。但是就在這時候,body.jsp是不會有<body>標簽的,會被自動銷毀。下面舉個例子。
這是main.jsp源代碼
1 <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> 2 <html> 3 <head> 4 <title>onload不加載</title> 5 </head> 6 <body > 7 <p>這是主界面</p> 8 <jsp:include page="body.jsp"></jsp:include> 9 </body> 10 </html>
這是body.jsp源代碼
1 <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> 2 <html> 3 <head> 4 <title>body頁面</title> 5 </head> 6 <body > 7 <p>這是body頁面</p> 8 </body> 9 </html>
然后運行之后看效果,打開F12開發工具
我們只看見<p>標簽,說明body.jsp的<body>標簽被自動銷毀。
找到問題后就要想解決辦法。其實我們發現,onload其實就是window.onload的另一種表現方式,原理都是一樣的,這時候就使用window來實現加載數據了.
1 <scripy type="text/javascrip"> 2 function fun(){ 3 alert("Hello World!"); 4 } 5 6 window.onload=function(){ 7 fun(); 8 } 9 </script>
這樣在加載頁面后執行fun()函數了,效果和<body onload="fun()">一樣。