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

senir

在很多情况下，我们需要通过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文件里。


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u/32608/showart_2038773.html