时间戳

首页 > 解决方案 > Vanilla JS ready() 函数 - 什么是`document.documentElement.doScroll`？

javascript - Vanilla JS ready() 函数 - 什么是`document.documentElement.doScroll`？

问题描述

我知道以前曾在这里问过类似的问题，但我找不到任何提出或回答这个特定问题的问题。

我想要一个尽可能简单的纯 JavaScript 就绪函数，该函数在页面完全加载时运行，类似于 jQuery$(document).ready()函数。

我一直在寻找这个例子：

if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
    // Document already fully loaded
    ready();
} else {
    // Add event listener for DOMContentLoaded (fires when document is fully loaded)
    document.addEventListener("DOMContentLoaded", ready);
}

function ready() {
    // Handler here
}

但是给出这个例子的网站总是谈论对旧版本 IE 的支持，我不需要那个。我只想支持现代浏览器（Chromium Edge、Chrome、Firefox、Opera 和 Safari），并希望找到一个更简单的解决方案，尤其是关于document.readyState !== "loading" && !document.documentElement.doScroll. 我似乎找不到太多关于 的信息document.documentElement.doScroll，至少不是来自像 MDN 这样的可靠来源，所以我不知道它到底做了什么，或者如果删除它可能会导致 ready 函数在某些边缘情况下中断。

我想我要问的是：

从示例代码中删除是否安全，document.readyState !== "loading" && !document.documentElement.doScroll当您只关心当前的主要浏览器（如上所列）时，现在是否有更好的方法来执行此操作？

标签： javascriptdocument-ready

解决方案

看起来doScroll是一个 IE 东西。不过，readyState检查很有用，因为如果 DOMContentLoaded 事件已经发生，它就不会触发。所以，如果你不需要 IE 支持，我会说你可以删除 doScroll 检查，留下：

if (document.readyState === "complete") {
    // Document already fully loaded
    ready();
} else {
    // Add event listener for DOMContentLoaded (fires when document is fully loaded)
    document.addEventListener("DOMContentLoaded", ready);
}

function ready() {
    // Handler here
}

推荐阅读