javascript - 在页面加载时绑定(bind)事件的跨浏览器兼容方式

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 event以及一些技巧来支持不支持 DOMContentLoaded 的旧版浏览器。大多数modern browsers support DOMContentLoaded包括从版本 9 开始的 IE。您可以测试浏览器是否支持 DOMContentLoaded using this page .

如果您没有使用内置支持 DOMContentLoaded 的 DOM 库，例如 jQuery，您可以使用 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);