Dioxus项目中DOMContentLoaded事件监听问题解析

在Dioxus项目开发过程中，开发者可能会遇到一个常见的JavaScript事件监听问题：当尝试在Dioxus的script宏中使用window.addEventListener监听DOMContentLoaded事件时，发现回调函数没有被执行。

问题现象

开发者通常会这样编写代码：

script{"
    alert('begin test window.addEventListener DOMContentLoaded');
    window.addEventListener('DOMContentLoaded', function () {{
        alert(' window.addEventListener DOMContentLoaded');
    }});
"}

运行后发现第一个alert能够正常执行，但第二个alert（在DOMContentLoaded事件回调中的）却从未触发。而如果直接执行alert语句，则可以正常工作。

问题原因

这个问题的根本原因在于Dioxus的执行时机与浏览器页面加载流程的关系。当Dioxus执行这段脚本时，页面的DOMContentLoaded事件可能已经触发过了。在浏览器中，DOMContentLoaded事件只会在页面初次完成DOM解析时触发一次，如果在此之后添加监听器，将不会再次触发。

解决方案

要正确处理这种情况，我们需要先检查文档的当前状态。JavaScript提供了document.readyState属性来获取文档加载状态：

const SCRIPT: &str = r#"if (document.readyState === "loading") {
    // 文档仍在加载中，可以添加监听器
    document.addEventListener("DOMContentLoaded", function() {
        alert("DOM加载完成");
    });
} else {
    // 文档已经加载完成，直接执行代码
    alert("DOM已经完成加载");
}"#;

在Dioxus中，我们可以这样使用：

use dioxus::prelude::*;

fn Home() -> Element {
    const SCRIPT: &str = r#"if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", function() {
            alert("DOM加载完成");
        });
    } else {
        alert("DOM已经完成加载");
    }"#;

    use_effect(|| {
        document::eval(SCRIPT);
    });

    rsx! {
        "hello"
    }
}

深入理解

1. document.readyState 有三个可能的值：

   • "loading"：文档仍在加载中
   • "interactive"：文档已完成解析，但子资源仍在加载
   • "complete"：文档和所有子资源已完成加载

2. Dioxus的执行时机：Dioxus的脚本通常在页面加载过程的后期执行，此时DOMContentLoaded事件很可能已经触发。

3. 最佳实践：对于需要在DOM加载完成后执行的代码，应该总是先检查文档状态，而不是直接添加事件监听器。

总结

在Dioxus项目中使用DOM事件监听时，开发者需要注意浏览器事件的触发时机。通过检查document.readyState，我们可以编写出更健壮的代码，确保无论在什么情况下都能正确执行DOM加载完成后的逻辑。这种方法不仅适用于DOMContentLoaded事件，也可以推广到其他类似的场景中。