javascript - 手动触发 domContentLoaded

Question

我偶然发现了一个执行此操作的脚本：

"complete" === document.readyState ? setTimeout(I, 1) : document.addEventListener ? (document.addEventListener("DOMContentLoaded", X, h), window.addEventListener("load", X, h)) : window.attachEvent ? window.attachEvent("onload", X) : console.log("No available event.")

其中 X 和 I 是函数，h 为假。

它有什么作用？

Answer 1

也许你会这样更好地理解它：

if("complete" === document.readyState){
    setTimeout(I, 1);
}else{
    if(document.addEventListener){
        document.addEventListener("DOMContentLoaded", X, h),
        window.addEventListener("load", X, h));
    }else{
        if(window.attachEvent){
            window.attachEvent("onload", X);
        }else{
            console.log("No available event.");
        }
    }
}

它确实：

1. 检查文档是否已加载
2. 如果是，I则在 1 ms 后调用函数
3. 如果没有，它会检查浏览器是否支持addEventListener
4. 如果支持，则在加载 DOM 时，X将调用函数（通过DOMContentLoaded或load事件）
5. 如果不是，它会检查浏览器是否支持attachEvent
6. 如果支持，则在加载 DOM 时，将调用函数 X（通过load事件）
7. 如果不是，则表示浏览器不支持addEventListener也不支持attachEvent

我猜函数X访问或修改 DOM，所以上面的脚本在调用之前检查 DOM 是否完全加载X。

Answer 2

这似乎是一段代码，它以跨浏览器的方式检测 DOM 的加载状态。

如果浏览器不支持 DOMContentLoaded，它将回退到使用窗口加载事件。

这用于在 DOM 可供操作时（即在页面呈现后）启动您的代码。