跨浏览器兼容的方式在页面加载时绑定事件

Question

使用jQuery,我可以使用以下函数在DOM加载后立即执行代码:

$(function() {
    // do stuff here
});

或等效地:

$(document).ready(function() { 
    // do stuff here
});

为了更好地理解原始javascript,我使用此代码来实现类似的效果:

window.onload = function() {
    // do stuff here
}

这种方法是否跨浏览器兼容？有没有更好的方法来实现这个功能？

Answer 1

是的,它是跨浏览器兼容的,但onLoad等待页面上的所有内容在它触发之前加载.内部jQuery.ready使用DOMContentLoaded事件和一些黑客来支持不支持的旧浏览器DOMContentLoaded.大多数现代浏览器都支持DOMContentLoaded包括IE从版本9开始.您可以测试浏览器是否支持DOMContentLoaded 使用此页面.

如果您没有使用内置支持的jQuery等DOM库,那么如果浏览器不支持它DOMContentLoaded,您可以使用DOMContentLoaded然后回退onLoad.

(function () { // Encapsulating our variables with a IIFE
  var hasRun = false;  // a flag to make sure we only fire the event once
                       // in browsers that support both events
  var loadHandler = function (evt) {
    if (!hasRun) {
      hasRun = true;
      console.log('loaded via ' + evt.type);
    }
  };
  
  document.addEventListener('DOMContentLoaded', loadHandler, false);
  window.addEventListener('load', loadHandler, false);
}());

除非您期望访问者使用非常老的浏览器(如IE8),否则只需在DOMContentLoaded没有备份的情况下使用即可.

document.addEventListener('DOMContentLoaded', function (evt) {
  console.log('loaded via ' + evt.type);
}, false);

Answer 2

这类似于JQuery的作用:

window.$ = {};
$.ready = function(fn) {
  if (document.readyState == "complete")
      return fn();

  if (window.addEventListener)
      window.addEventListener("load", fn, false);
  else if (window.attachEvent)
      window.attachEvent("onload", fn);
  else
      window.onload = fn;
}

并使用它:

$.ready(function() {
  // code here...
});