zoukankan      html  css  js  c++  java
  • 关于window.onload的一些小理解

      这今天写一个demo,之前一直很好,这次碰到了一个window.onload问题,在网上看了很多资料,就整理整理!

      window.onload 是(1)等页面内包括图片的所有元素加载完毕后才能执行,这里还和jQuery里的$(document).ready()不太一样,jQuery里的是只要dom结构加载完就执行;

      (2)不能同时使用多个window.onload,例如window.onload = fun1;window.onload = fun2;这样的话只会执行第二个;第一个被覆盖了;要是使用多个的话,后面我会说大牛们教给我们的方法。

    我写程序大体的意思这样写的:

    <!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的属性,又是测试了一下,知道了。

    这个在window.onload外面,所以会先执行,这是就问题来了,dom都没有加载,他上哪里去找oBox = document.getElementById('box'),里的div的元素,没找到,他会返回null,这个oBox真的是null,但是下一句程序就会报错了,这个相当于aBoxDiv = null.getElementsByTagName('div');null对象里怎么能找到这个属性呀。

    所以以后就要把这些获取dom节点的声明,一定要放在window.onload里,要不就会出错的,其他的要是声明全局变量可以放在外面,但是获取dom节点一定要放在里面。

    之后就查了查window.onload:

    有人说,如果你想这样window.onload = fun1;不如用window.onload = function(){ fun1();}因为第一种在木屑情况不好用。

    如果你想加载多个。可以用这种办法:

    第一种是用于不太复杂的程序:

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

    这个兼容性的写法我就不写了。

    欢迎各位指证,我其中理解的不足或者是错误。

  • 相关阅读:
    模拟google分页效果
    真理胜于一切 JAVA模拟表单提交
    springboot @vaule注解失效解决办法
    安装cnpm
    公众号微信支付开发
    vue去掉链接中的#
    springboot集成mongoDB简易使用
    Spring boot中使用aop详解
    Promise 的基础用法
    MySQL的if,case语句使用总结
  • 原文地址:https://www.cnblogs.com/todayhappy/p/4156437.html
Copyright © 2011-2022 走看看