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

Question

使用 jQuery，我可以使用以下函数在 DOM 加载完成后立即执行代码：

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

或者等价地说：

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

为了更好地理解原始JavaScript，我正在使用以下代码来实现类似的效果：

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

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

- aligray

---

jQuery解决了“跨浏览器”问题，是实现此功能的“更好方式”。 - Sparky

重复的问题：https://dev59.com/mnA75IYBdhLWcg3wGlAa - mrk

Answer 1

是的，它是跨浏览器兼容的，但是 onLoad 在触发之前会等待页面上所有内容都加载完成。在内部，jQuery.ready 使用DOMContentLoaded 事件和一些技巧来支持不支持 DOMContentLoaded 的老版本浏览器。大多数现代浏览器支持 DOMContentLoaded，包括 IE9 及以上版本。您可以使用此页面测试浏览器是否支持 DOMContentLoaded。

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

- Useless Code

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...
});

- Will

Answer 3

window.onload方法在各种浏览器中都兼容，但有更好的替代方案。

• jQuery的ready事件在DOM准备就绪时触发。
• window.onload事件在所有数据下载完成后触发。

所以，假设您的页面上有很多图像（或一个大图像）。html文件将在图像下载完成之前下载完毕并准备好进行操作。因此，jQuery的ready事件被触发，您可以开始执行出色的JavaScript操作，同时所有漂亮的图片都在下载。

这是使用js库的好处之一。

当没有那么多图像时，差异可以忽略不计。但是，您只能在onload事件上设置一个方法。但是，您可以多次设置jQuery的ready事件，并且每个方法将按顺序调用。

- Abishai Gray

Answer 4

跨浏览器兼容性取决于您如何定义“浏览器”这个术语。例如，如果它是一个基于文本的浏览器，那么它可能不是您要找的。

回答您的问题，如果特定的浏览器需要 window.onload 功能，则它将跨浏览器兼容。

作为一般指南，我们通常使用经过测试的库，以使库负责处理此类“跨浏览器”兼容性，而我们处理实际应用程序逻辑。

希望这有所帮助！

- Vern

---

谢谢你的回答！我正在努力学习原生 JS，因为我开始是用 jQuery 学习的！ - aligray

@aligray：我赞扬你的努力。我希望每个人都有这种愿望。然而，使用原始JavaScript很难实现的许多功能，使用jQuery可以轻松实现。换句话说，我认为这不是“二选一”的问题。我相信你可以在实现jQuery的同时学习正确的JavaScript。任何因为jQuery做得更好而不再需要的东西，你就不再需要它了。当然，我是十多年前学习JavaScript的。 - Sparky

如果你想要学习JS的“正确”方式，我会推荐阅读Douglas Crockford的书《JavaScript: The Good Parts》和Stoyan Stefanov的书《Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries》，两本书都非常优秀。如果你对这种库级别的东西感兴趣，John Resig的《Secrets of the JavaScript Ninja》将是一个很好的资源……如果他们最终终于出版了的话（我在预订时它最初定于2008年秋季出版）。 - Useless Code

@无用代码 谢谢，我一定会研究它们的。 - aligray