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

Question

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

我想要一个尽可能简单的纯 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 是否安全，当您只关心当前的主要浏览器（上面列出的）时，现在是否有更好的方法来执行此操作？

Answer 1

看起来 doScroll is an IE thing. The 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
}

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

Vanilla JS ready() function - What is `document.documentElement.doScroll`?

javascript

document-ready