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

Posted 2023-03-06

【中文标题】在页面加载时绑定事件的跨浏览器兼容方式

【英文标题】：Cross-browser compatible way to bind events on page load

【发布时间】：2011-09-15 05:13:52

【问题描述】：

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

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

或等效：

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

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

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

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

【问题讨论】：

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

重复***.com/questions/3474037/…

【参考方案1】：

是的，它是跨浏览器兼容的，但onLoad 在触发之前等待页面上的所有内容加载。在内部jQuery.ready 使用DOMContentLoaded event 和一些技巧来支持不支持DOMContentLoaded 的旧浏览器。大多数modern browsers support DOMContentLoaded 包括IE 9 开始。您可以测试浏览器是否支持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);

【参考方案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...
);

【参考方案3】：

window onload 方法是跨浏览器兼容的，但还有更好的选择。

当 DOM 就绪时触发 jQuery 就绪事件。 当所有数据下载完毕后，window onload 事件就会触发。

假设您的页面上有很多图片（或一张大图片）。 html 文件将在图像下载完成之前很久就完成下载并准备好进行操作。所以 jQuery 的 ready 事件开始了，你可以开始做很棒的 JavaScript 东西，同时下载所有漂亮的图片。

这就是使用 js 库是个好主意的原因之一。

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

【参考方案4】：

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

为了回答您的问题，如果特定浏览器支持 window.onload 功能，它将是跨浏览器兼容的。

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

希望对你有帮助！

【讨论】：

为您的回答干杯！我正在尝试正确学习原始JS，因为我开始使用jQuery！

@aligray：我赞扬你的努力。我希望每个人都有这个愿望。然而，使用原始 JavaScript 无法轻松完成很多事情，而使用 jQuery 可以轻松完成。换句话说，我不认为它是“one or other”。我相信您可以在实现您的 jQuery 时学习正确的 JavaScript。任何你不再需要的东西，因为 jQuery 做得更好，好吧，你不再需要它了。再说一次，我在 10 多年前学习了 JavaScript。

@aligray 如果你想以“正确”的方式学习 JS，我建议阅读 Douglas Crockford 的书 JavaScript: The Good Parts 和 Stoyan Stefanov 的书 Object-Oriented JavaScript：创建可扩展、可重用的高质量 JavaScript 应用程序和库两者都非常出色。如果你对这种库级别的东西感兴趣，John Resig 的 JavaScript Ninja 的秘密 将是一个很好的资源......如果他们最终发布它（它最初定于 2008 年秋季，当时我预购）。

@Useless Code 谢谢，我一定会调查的。