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

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

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

或等效地：

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

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

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

跨浏览器兼容吗？有没有更好的方法来实现此功能？

已邀请:

4 个回复

缔恃钨

是的，它是跨浏览器兼容的，但是onLoad等待页面上的所有内容加载后才触发。在内部，ѭ6使用DOMContentLoaded事件和一些技巧来支持不支持DOMContentLoaded的旧版浏览器。大多数现代浏览器都支持DOMContentLoaded，包括从版本9开始的IE。您可以使用此页面测试浏览器是否支持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);
}());

桑娠贯涤

这类似于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...
});

坊岔埠绵

window onload方法与跨浏览器兼容，但是有更好的选择。 DOM准备就绪时，将触发jQuery ready事件。下载所有数据后，将触发窗口onload事件。因此，假设您的页面上有很多图片（或一张大图片）。 html文件将完成下载，并且在完成图像下载之前很长时间就可以进行操作了。因此，jQuery \的事件准备好了，您可以在下载所有漂亮图片的同时开始编写出色的JavaScript。这就是使用js库的一个好主意的原因之一。如果没有太多图像，则差异可以忽略不计。不过，您一次只能在onload事件上设置一个方法。但是，您可以多次设置jQuery \的ready事件，并且每个方法都会被依次调用。

好按紊叉

跨浏览器的兼容性必须取决于您如何定义术语“浏览器”。例如，如果它是基于文本的浏览器，则可能不是您要找的。为了回答您的问题，如果特定的浏览器需要window.onload功能，它将与跨浏览器兼容。作为一般指南，我们通常使用经过测试的库，以便我们允许这些库处理这种“跨浏览器”兼容性，并处理实际的应用程序逻辑。希望能帮助到你！

要回复问题请先登录或注册

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

4 个回复

发起人

jquery

cross_browser

compatibility

javascript

问题状态

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

与内容相关的链接

4 个回复

发起人

jquery

cross_browser

compatibility

javascript

问题状态