javascript - 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 部分。做滚动。我似乎找不到太多关于 document.documentElement.doScroll 的信息，至少不是来自像 MDN 这样的可靠来源，所以我不知道它到底做了什么，或者如果删除它会导致准备好在某些边缘情况下中断的功能。

我猜我想问的是这个:

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

Answer 1

看起来像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
}