PHP+Ajax构建SPA：动态加载文件中JS无法执行问题排查

问题背景 #

用PHP搭建单页应用（SPA），采用静态HTML骨架，动态内容加载到main_view容器中，内容能正常显示，但子文件（如register.php）内的JavaScript代码（如alert语句）完全无法执行。

相关代码片段 #

index.php的内容容器

<main>
    <div id="main_view" class="main_view">

    </div>
</main>

router.js的动态加载逻辑

document.addEventListener("DOMContentLoaded", function() {
    const path = window.location.pathname.split("/");
    const file = (path[path.length-1].match(/^.*[^.php]/) || [])[0];
    const isReload = !document.referrer || document.referrer === path;
    //const lastVisited = sessionStorage.getItem("lastVisited");
    //sessionStorage.setItem("lastVisited", window.location.pathname);

    const isRoot = path === "/";

    if (isRoot) {
        loadPage("index", "");
        window.history.pushState("", "", "/");
    }

    console.log(isRoot,document.referrer);

    document.querySelectorAll(".main_nav").forEach((item) => {
        item.addEventListener("click", function() { 
            const folder = item.getAttribute("folder") || "";
            const path   = item.getAttribute("file")   || "";

            if (path === 'index') { 
                window.location = "/";
            } 

            console.log(folder,path,"das is select");

            loadPage(path,folder);

            if (path === "") {
                window.history.pushState("", "folder", "/");
            } else {
                window.history.pushState("", "", path);
            }
            
        });
    });


    if (isReload) {
        console.log("das is reload");
        const menuItems   = document.querySelectorAll(".main_nav");
        const currentItem = Array.from(menuItems).find(item => {
            return item.getAttribute("file") === file;
        });

        if (currentItem) {
            const folder = currentItem.getAttribute("folder") || "";
            const path   = currentItem.getAttribute("file")   || "";

            loadPage(path, folder);
        }
    }


    function loadPage($path, $folder = "") {
        console.log($folder,$path,"das is load");
        const main_view = document.getElementById("main_view");
        const request   = new XMLHttpRequest();

        request.open("GET", $folder + "/" + $path + ".php");
        request.send();
        request.onload = function() {
            if (request.status == 200) {
                main_view.innerHTML = request.responseText;
            }
        }
    };
});

问题原因 #

核心问题出在innerHTML的行为特性上：当通过innerHTML将包含JS代码的HTML插入DOM时，浏览器只会解析渲染HTML元素，不会自动执行其中的<script>标签代码。这是浏览器的安全机制，同时也是innerHTML的设计规则。

解决方案 #

方案1：手动提取并执行动态内容中的JS代码 #

修改loadPage函数，插入HTML后主动提取所有<script>标签，创建新的script元素触发执行：

function loadPage($path, $folder = "") {
    console.log($folder,$path,"das is load");
    const main_view = document.getElementById("main_view");
    const request   = new XMLHttpRequest();

    request.open("GET", $folder + "/" + $path + ".php");
    request.send();
    request.onload = function() {
        if (request.status == 200) {
            main_view.innerHTML = request.responseText;
            
            // 提取并执行所有script标签
            const scripts = main_view.querySelectorAll("script");
            scripts.forEach(oldScript => {
                const newScript = document.createElement("script");
                // 复制原标签属性
                Array.from(oldScript.attributes).forEach(attr => {
                    newScript.setAttribute(attr.name, attr.value);
                });
                // 复制代码内容
                newScript.textContent = oldScript.textContent;
                // 替换旧标签触发执行
                oldScript.parentNode.replaceChild(newScript, oldScript);
            });
        }
    }
};

方案2：将JS代码与HTML分离（推荐） #

把动态页面的JS逻辑抽成独立文件，在主页面提前引入或动态加载对应脚本：

1. register.php仅保留HTML结构：

<!-- register.php -->
<form id="register-form">
    <!-- 表单内容 -->
</form>

2. 创建register.js存放逻辑：

// register.js
function initRegister() {
    alert("注册页面加载完成");
    // 其他注册相关逻辑
}

3. 修改loadPage函数动态加载并执行脚本：

function loadPage($path, $folder = "") {
    console.log($folder,$path,"das is load");
    const main_view = document.getElementById("main_view");
    const request   = new XMLHttpRequest();

    request.open("GET", $folder + "/" + $path + ".php");
    request.send();
    request.onload = function() {
        if (request.status == 200) {
            main_view.innerHTML = request.responseText;
            
            // 动态加载对应页面的脚本
            const script = document.createElement("script");
            script.src = $folder + "/" + $path + ".js";
            script.onload = function() {
                // 执行页面初始化函数
                const initFn = window[`init${$path.charAt(0).toUpperCase() + $path.slice(1)}`];
                if (initFn) initFn();
            };
            document.body.appendChild(script);
        }
    }
};

这种方式更利于代码维护，也规避了innerHTML执行脚本的潜在风险。

方案3：使用DOMParser解析并处理脚本 #

用DOMParser解析响应文本，分别处理HTML元素和脚本：

function loadPage($path, $folder = "") {
    console.log($folder,$path,"das is load");
    const main_view = document.getElementById("main_view");
    const request   = new XMLHttpRequest();

    request.open("GET", $folder + "/" + $path + ".php");
    request.send();
    request.onload = function() {
        if (request.status == 200) {
            const parser = new DOMParser();
            const doc = parser.parseFromString(request.responseText, "text/html");
            
            // 插入HTML元素到页面
            main_view.innerHTML = "";
            doc.body.childNodes.forEach(node => {
                main_view.appendChild(node.cloneNode(true));
            });
            
            // 执行所有script标签
            doc.querySelectorAll("script").forEach(script => {
                const newScript = document.createElement("script");
                if (script.src) {
                    newScript.src = script.src;
                } else {
                    newScript.textContent = script.textContent;
                }
                document.head.appendChild(newScript);
            });
        }
    }
};

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