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）中找到的，所以我不知道它到底做了什么，或者刪除它是否會導致就緒函數在某些邊緣中斷案件。

我想我想問的是這個：

從示例代碼中刪除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
}