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包括IE从版本9开始。您可以测试浏览器是否支持DOMContentLoaded using this page。

如果您没有使用内置支持DOMContentLoaded的jQuery等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);

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

Answer 3

窗口onload方法是跨浏览器兼容的，但有一个更好的选择。

当DOM准备就绪时，jQuery ready事件将触发。
下载所有数据时会触发窗口onload事件。

因此，假设您的页面上有很多图像（或一个大图像）。在下载图像之前，html文件将完成下载并准备好进行操作。所以jQuery的准备事件拍摄，你可以开始做伟大的JavaScript的东西，而所有这些漂亮的照片下载。

这是使用js库的好主意之一。

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

Answer 4

跨浏览器兼容性必须取决于您如何定义术语“浏览器”。例如，如果它是基于文本的浏览器，那么它可能不是您正在寻找的。

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

作为一般指南，我们通常使用经过测试的库，以便我们允许库来处理这种“跨浏览器”兼容性，并且我们处理实际的应用程序逻辑。

希望它有所帮助！

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

4 个答案: