首页 > 代码库 > about "window.onload"

about "window.onload"

在前几天一次练习中因为我要在页面加载完成后调用一个函数,于是我在javascript中用了window. onl oad,这个方法以前从学习js就在使用,有时还用来调用多个函数。然而我在这次想偷懒,就这样写了一段代码:

                     window.onload=function name(){

                      $(".left_div").slideDown("show");

                  }

因为原本window.onload=function(){·······}就是一个匿名函数,所以我像上面这样写并没有错,但是当我在后面调用name()这个函数时,就没法调用。因为onload 事件会在页面或图像加载完成后立即发生,而且属于event对象。像我那上面的那种写法,如果在后面再调用这个name()这个函数肯定是不行的!

       以下是几种用法方法:

1、最简单的调用方式

   直接写到html的body标签里面,如:

   <html>

      <body onl oad="function()">

      </body>

   </html>

2、在JS语句调用

   <script type="text/javascript">

      function name(){……}

      window.onload=name;

   </script>

3、同时 调用多个函数

   直接写到html的body标签里面,如:  

   <html>

      <body onl oad="name1();name2();name3();">

      </body>

   </html>

4、js调用多个函数,以下这种调用方式可以用于不太复杂的JS程序中,如果程序函数很多,逻辑比较复杂,可以考虑用第五种方式。

     <script type="text/javascript">

      function name1(){……}

      function name2(){……}

      function name3(){……}

      window.onload=function(){

      name();

      name 2();

      name 3();

     }

   </script>

5、JS自定义函数式多次调用

   <script type="text/javascript">

      function func1(){……}

      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(func1);

       addLoadEvent(func2);

       addLoadEvent(func3);

   </script>