關於window.onload的一些小理解

時間 2019-12-13

標籤關於 window.onload window onload 些小理解欄目 JavaScript 简体版

原文原文鏈接

這今天寫一個demo，以前一直很好，此次碰到了一個window.onload問題，在網上看了不少資料，就整理整理！javascript

window.onload 是（1）等頁面內包括圖片的全部元素加載完畢後才能執行，這裏還和jQuery裏的$(document).ready()不太同樣，jQuery裏的是隻要dom結構加載完就執行；html

（2）不能同時使用多個window.onload，例如window.onload = fun1；window.onload = fun2；這樣的話只會執行第二個；第一個被覆蓋了；要是使用多個的話，後面我會說大牛們教給咱們的方法。java

我寫程序大致的意思這樣寫的：瀏覽器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>簡單測試</title>

<script type="text/javascript">

    var oBox = document.getElementById('box');
        aBoxDiv = oBox.getElementsByTagName('div');//出問題了
        window.onload = function(){
            //這裏是代碼
            }

</script>
 
<body>
<div id="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

</body>
</html>

由於我是小白吧，好久以前知道windown.onload的問題，不過如今又忘了！我就鬱悶了，我寫的很對呀，怎麼有這個問題呀！奧，人家瀏覽器說了不能讀取null中的getElementsByTagName的屬性，又是測試了一下，知道了。dom

這個在window.onload外面，因此會先執行，這是就問題來了，dom都沒有加載，他上哪裏去找oBox = document.getElementById('box')，裏的div的元素，沒找到，他會返回null，這個oBox真的是null，可是下一句程序就會報錯了，這個至關於aBoxDiv = null.getElementsByTagName('div');null對象裏怎麼能找到這個屬性呀。測試

因此之後就要把這些獲取dom節點的聲明，必定要放在window.onload裏，要不就會出錯的，其餘的要是聲明全局變量能夠放在外面，可是獲取dom節點必定要放在裏面。spa

以後就查了查window.onload:code

有人說，若是你想這樣window.onload = fun1;不如用window.onload = function(){ fun1();}由於第一種在木屑狀況很差用。htm

若是你想加載多個。能夠用這種辦法：對象

第一種是用於不太複雜的程序：

     <script type="text/javascript">
      function func(){//這裏是代碼}
      function func2(){//這裏是代碼}
      function func3(){//這裏是代碼}
      window.onload = function(){
      func();
      func2();
      func3();
     }
     </script>

第二種是：

   <script type="text/javascript">
      function func(){//這裏是代碼}
      function func2(){//這裏是代碼}
      function func3(){//這裏是代碼}

      function addLoadEvent(func){
         var oldonload=window.onload;
         if(typeof window.onload!="function"){
             window.onload=func;
          } else {
             window.onload=function(){
                  oldonload();
                  func();
               }
             }
       }
//加載多個
addLoadEvent(func);
addLoadEvent(func2);
addLoadEvent(func3);

這代碼的意思是：聲明瞭oldonload = window.onload,其實這個就是保留在我要用以前，他的舊值；接下來，typeof一下

看看這個window.onload以前有人用過嗎，typeof window.onload 值是object，不等於function，原來沒有人用呀，那我就徵用window.onload，那就執行真中的語句；

若是typeof返回的是function，這就說明window.onload以前被人用了，可是，window.onload就一個，只能綁定一個，這可怎麼辦呢？？我們都是文明人，你先用的onload,那就你先用完了，我再用，不就完事了！就有了這樣的語句了（這段解釋是給初學者看的，大神就不要看了）

還有最後一種是：

用window.attachEvent,(IE私房)和window.addEventListener,(FF等)

這個方法還能夠用來觸發其餘的多個事件的綁定，功能很強大的

這個方法也是極好極好的

<script type="text/javascript">
function func(){}
function func2(){}
window.addEventListener('load',func,false);
window.addEventListener('load',func2,false);
</script>

這個兼容性的寫法我就不寫了。

歡迎各位指證，我其中理解的不足或者是錯誤。