手动触发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. 如果是，则在1 ms之后调用函数I
3. 如果没有，则检查浏览器是否支持addEventListener
4. 如果支持，则加载DOM时，将调用函数X（通过DOMContentLoaded或load个事件）
5. 如果不是，则检查浏览器是否支持attachEvent
6. 如果支持，则加载DOM时，将调用函数X（通过load事件）
7. 如果不是，则表示浏览器不支持addEventListener或attachEvent

我希望函数X访问或修改DOM，因此上面的脚本会在调用X之前检查DOM是否已完全加载。

Answer 2

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

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

一旦可以操作DOM，即在页面呈现后，用于启动代码。