javascript中onload多个函数-支持多个页面onload事件

在很多情况下，我们需要通过javascript来操作页面的元素，但这需要浏览器读取到这段JS代码的时候页面元素已经存在了，对于我们将JS代码放在head区而操作body里面的元素的时候就不可以。

    如果遇到这种情况，我们可以用onload事件来解决这个问题。onlaod事件告诉浏览器等页面加载完成了再执行。

    语法：

    window.onload = fn;

    function fn()

    {

        //函数主体 

    }

这样等页面全部加载完了才会调用fn这个函数。

 

    页面复杂的时候onload可能不只一个函数，这时可以将这多个函数放在一个主体函数里。

    window.onload = fn;

    function fn()

    {

        fn1();    //第一个函数

        fn2();    //第二个函数

        ...

    }

 

    页面更复杂的时候，我们在里调用了两个JS文件（其中一个可能是外部的，不被控制），这两个JS文件都用到了onload，我们会发现第一个onload会被第二个onload覆盖，不会执行。而且由于分布在两个页面，所以我们不能将他整合到一个函数中，这时就需要用到addEventListener-“添加事件监听”方法了。

    语法：

    window.addEventListener('load',fn1,false);

    window.addEventListener('load',fn2,false);

    这两段代码分别放在一个JS文件里。

   

    这个函数IE不兼容，对应IE的函数是attachEvent。

    对应IE的语法：

    window.attachEvent('onload',fn1);

    window.attachEvent('onload',fn2);

    这两段代码分别放在一个JS文件里。

 

    可以写一个函数，来兼容不同的浏览器。代码贴在下面：

    function addLoadListener(fn)
   {
     if (typeof window.addEventListener != 'undefined')
    {
      window.addEventListener('load',fn,false);
    }
     else if (typeof document.addEventListener != 'undefined')
    {
      document.addEventListener('load',fn,false);
    }
     else if (typeof window.attachEvent != 'undefined')
    {
      window.attachEvent('onload',fn);
    }
     else
    {
       var oldfn = window.onload;
       if (typeof window.onload != 'function')
      {
         window.onload = fn;
      }
      else
      {
         window.onload = function() {
         lodfn();
         fn();
         };
       }
     }
   }

 

然后我们可以通过调用这个函数来实现我们的功能了。

addLoadListener(fn1);

addLoadListener(fn2);

这两段代码分别放在一个JS文件里。