JavaScript实现页面加载完成后执行函数的多种方案

JavaScript页面加载执行机制概述

JavaScript脚本的执行通常依赖于特定触发条件。常见的做法是在网页中直接定义若干函数，这些函数可能在代码加载阶段由浏览器自动处理，或者通过类似的代码结构来显式触发特定功能。

<div id=”link” onclick=”fun()” ></div>

上述代码示例表明，当用户点击ID为link的元素时，会触发其onclick事件，进而执行预先定义的fun函数。然而，这种将触发逻辑直接嵌入HTML结构的做法并不推荐，因为它混淆了内容与行为，给后续的二次开发和维护带来不便。值得注意的是，事件处理程序必须与对应元素绑定后生效，且该元素需先加载完毕。若将此类处理脚本置于head区域，浏览器通常会报错，因为此时下方的HTML元素尚未加载，而head中的脚本已执行完毕。

理想的JavaScript执行方式应遵循行为与内容分离的原则，并在页面完全加载后进行。因此，处理JavaScript代码时，我们应当利用监听器机制以及window对象的load事件。

使用监听器实现行为与内容分离

监听器

监听器的核心作用在于实现行为与内容的解耦。过去，我们需要在HTML中嵌入触发事件以调用JavaScript函数；现在，可以直接在JavaScript中为特定元素添加监听器，监控该元素的事件。一旦元素触发特定事件，且监听器中定义了相应的处理函数，系统便会自动执行该处理逻辑。

W3C标准推荐的方法为addEventListener，该方法被IE9及以上版本、Chrome、Firefox及Opera等主流浏览器支持。其语法结构如下：

window.addEventListener(‘load',function,false);

在早期版本的IE浏览器中，存在效果类似的attachEvent方法：

window.attachEvent(‘onload',function);

使用监听器的流程相对简单：首先获取页面中的目标元素，随后对该元素应用监听器，指定监听的事件类型及对应的事件处理函数。以上文为例，代码实现如下：

document.getElementById(‘link').addEventListener(‘click',fun,false);

关于监听器的更详细使用说明，请参阅文末补充资料。接下来讨论window.onload事件。

window.onload事件及其局限性

onload事件仅在页面所有资源完全载入后才会触发。将JavaScript代码封装在onload事件中，可确保浏览器在HTML元素加载完成后才执行相关脚本。基础用法如下：

window.onload = function(){
 //code
}

如此，函数内的code将在加载完成后被执行。但此方法存在明显缺陷：它仅适用于单一函数。页面中若存在多个window.onload事件，后续定义的事件将覆盖前面的事件。为解决此问题，我们可以在一个window.onload事件中调用所有需要执行的函数，并在外部单独定义这些函数：

window.onload = function(){
  func1();
  func2();
 }
function func1(){…}
function func2(){…}

虽然这种方法可行，但操作繁琐，因为需要手动列出所有待加载的函数名，修改起来极为不便。尽管jQuery提供了强大的多脚本加载方案，原生JavaScript同样具备解决这一问题的途径。

实现多函数同时加载的解决方案

window.onload同时处理多个函数

我们需要编写一个通用的处理函数，具体代码实现如下：

  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(){
          oldfn();
          fn();
        };
      }
    }
  }

简要解析该自定义的addLoadListener函数：它接收一个函数名作为参数。首先检测浏览器是否支持相关监听器；若支持，则利用监听器监控window对象的load事件并处理该函数。这段代码通过if语句判断了各类浏览器的监听事件支持情况，实现了跨浏览器兼容。将此代码置于JavaScript代码段的顶部，随后在下方定义相关函数，并通过以下语句加载JavaScript函数：

addLoadListener(func);
function func() {…}

如此，任何需要在页面加载完成后执行的JavaScript函数，均可直接使用addLoadListener函数进行注册，且支持注册多个函数。通常建议将所有JavaScript代码均通过onload事件加载，以规避潜在意外情况的发生。