innerHTML插入含DOMContentLoaded的脚本未执行问题求助

问题根源 #

你遇到的核心问题是：当通过fetch异步插入外部HTML时，页面的DOMContentLoaded事件早已触发，导致插入脚本中监听该事件的代码永远不会执行。替换script标签的操作只能让脚本本身加载，但无法回溯触发已完成的事件。

解决方案1：自动替换脚本中的DOMContentLoaded监听逻辑 #

修改你的includeHTML函数，在处理插入的脚本时，自动将DOMContentLoaded的监听代码替换为直接执行：

function includeHTML() {
    let elements = document.querySelectorAll("[include-html]");

    for (let i = 0; i < elements.length; i++) { 
        const elem = elements[i];
        let file = elem.getAttribute("include-html");
        
        fetch(file).then(response => response.text()).then(data => {
            elem.innerHTML = data;
            
            let scripts = elem.querySelectorAll("script");
            // 嵌套循环避免变量名冲突，原代码重复用i会导致逻辑错误
            for (let j = 0; j < scripts.length; j++) { 
                let script = scripts[j];
                let newScript = document.createElement("script");

                // 复制原脚本的所有属性
                let attrs = script.attributes;
                for (let k = 0; k < attrs.length; k++) { 
                    let attr = attrs[k];
                    newScript.setAttribute(attr.name, attr.value);
                };
                
                // 替换DOMContentLoaded监听为直接执行回调
                let scriptContent = script.innerHTML;
                // 匹配document的监听
                scriptContent = scriptContent.replace(
                    /document\.addEventListener\(['"]DOMContentLoaded['"],\s*(function\s*\([^)]*\)\s*{[^}]*})\s*\)/g,
                    (_, callback) => `${callback}()`
                );
                // 匹配window的监听
                scriptContent = scriptContent.replace(
                    /window\.addEventListener\(['"]DOMContentLoaded['"],\s*(function\s*\([^)]*\)\s*{[^}]*})\s*\)/g,
                    (_, callback) => `${callback}()`
                );
                
                newScript.innerHTML = scriptContent;
                script.replaceWith(newScript);
            };
        }); 
        elem.removeAttribute("include-html");
    };
};

includeHTML();

说明：这个正则能处理大多数简单的匿名函数监听场景，如果脚本中用了命名函数变量作为回调，可能需要针对性调整。

解决方案2：约定自定义事件触发初始化（更可靠） #

如果可以修改外部HTML中的脚本，将依赖DOMContentLoaded的逻辑改为监听自定义事件，同时兼容DOM已加载的情况：

1. 外部HTML（如file.html）中的脚本写法：

// 把初始化逻辑封装成独立函数
function initComponent() {
    // 原来依赖DOMContentLoaded的代码
    console.log("组件初始化完成");
}

// 检查DOM状态，已加载则直接执行，否则监听自定义事件
if (document.readyState === "complete" || document.readyState === "interactive") {
    initComponent();
} else {
    document.addEventListener("includedHTMLReady", initComponent);
}

2. 修改includeHTML函数，在插入完成后触发自定义事件：

function includeHTML() {
    let elements = document.querySelectorAll("[include-html]");

    for (let i = 0; i < elements.length; i++) { 
        const elem = elements[i];
        let file = elem.getAttribute("include-html");
        
        fetch(file).then(response => response.text()).then(data => {
            elem.innerHTML = data;
            
            let scripts = elem.querySelectorAll("script");
            for (let j = 0; j < scripts.length; j++) { 
                let script = scripts[j];
                let newScript = document.createElement("script");

                let attrs = script.attributes;
                for (let k = 0; k < attrs.length; k++) { 
                    let attr = attrs[k];
                    newScript.setAttribute(attr.name, attr.value);
                };
                newScript.innerHTML = script.innerHTML;
                script.replaceWith(newScript);
            };
            
            // 触发自定义事件，通知插入的脚本执行初始化
            document.dispatchEvent(new CustomEvent("includedHTMLReady"));
        }); 
        elem.removeAttribute("include-html");
    };
};

includeHTML();

说明：这个方案更灵活，适合复杂脚本逻辑，且不需要依赖正则替换的黑魔法。

额外注意事项 #

• 不要手动触发全局DOMContentLoaded事件，会导致页面其他脚本重复执行
• 如果插入的脚本是外部引入（带src属性），可以在newScript.onload事件中触发自定义事件，确保外部脚本加载完成后再执行初始化：

if (newScript.src) {
    newScript.onload = () => {
        document.dispatchEvent(new CustomEvent("includedHTMLReady"));
    };
}

内容的提问来源于stack exchange，提问作者auroradynia