JS:window.onload的使用

Posted 2020-06-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS:window.onload的使用相关的知识，希望对你有一定的参考价值。

1、最简单的调用方式

直接写到html的body标签里面，如：

1    <html>
2       <body onload="func()">
3       </body>
4    </html>

2、在JS语句调用

1    <script type="text/javascript">
2       function func(){……}
3       window.onload=func;
4    </script>

3、同时调用多个函数

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

   <html>
      <body onload="func1();func2();func3();">
      </body>
   </html>

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

 1      <script type="text/javascript">
 2       function func1(){……}
 3       function func2(){……}
 4       function func3(){……}
 5       window.onload=function(){
 6       func1();
 7       func2();
 8       func3();
 9      }
10    </script>

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

 1    <script type="text/javascript">
 2       function func1(){……}
 3       function func2(){……}
 4       function func3(){……}
 5       function addLoadEvent(func){
 6          var oldonload=window.onload;
 7          if(typeof window.onload!="function"){
 8              window.onload=func;
 9           }
10          else{
11              window.onload=function(){
12                   oldonload();
13                   func();
14                }
15              }
16        }
17        addLoadEvent(func1);
18        addLoadEvent(func2);
19        addLoadEvent(func3);
20    </script>

说明：

我们经常使用 window.onload 来处理页面，当页面加载完成做一些事情。但这个 window.onload 是页面全部加载完成，甚至包括图片

1. window.onload = function(){}

2. window.onload ＝ functionName; // 注意:没有括号

以上是关于JS:window.onload的使用的主要内容，如果未能解决你的问题，请参考以下文章

JS window,onload 与 $().read()

识别浏览器的JavaScript引擎的方法