XMLHttpRequest获取PHP返回的JS函数无法识别如何内联调用

通过innerHTML插入DOM的<script>标签不会被浏览器解析执行，这是HTML规范内置的安全限制。你代码里PHP返回的injectedJS函数声明始终没有被注册到全局作用域，所以检测时永远识别不到函数，控制台输出no。

• 方案1：手动重建script标签触发执行
  用innerHTML插入内容后，遍历新插入节点里的所有<script>标签，手动创建新的原生script元素替换原有标签，浏览器会正常解析执行新建script标签里的代码，修改后的XHR回调逻辑如下：

xhttp.onreadystatechange = function(){
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        const testDiv = document.getElementById('testDiv');
        testDiv.innerHTML = xhttp.responseText;
        // 提取所有插入的script标签
        const scriptNodes = testDiv.querySelectorAll('script');
        scriptNodes.forEach(oldScript => {
            const newScript = document.createElement('script');
            // 复制原标签的所有属性（比如src、type等）
            Array.from(oldScript.attributes).forEach(attr => {
                newScript.setAttribute(attr.name, attr.value);
            });
            // 复制脚本内容
            newScript.textContent = oldScript.textContent;
            // 替换节点触发脚本执行
            oldScript.parentNode.replaceChild(newScript, oldScript);
        });
        // 下一个事件循环检测函数，确保脚本已执行完成
        setTimeout(() => {
            if (typeof injectedJS === "function") {
                console.log('yes');
                injectedJS(); // 可正常调用
            } else {
                console.log("no");
            }
        }, 0);
    }
};

• 方案2：拆分接口返回的内容类型
  不要把HTML结构和JS逻辑混在同一段返回内容里，接口可以结构化返回需要渲染的HTML片段、需要执行的JS代码两部分，拿到JS代码后通过动态创建script标签或者eval执行即可。注意这种方案必须严格校验返回内容的合法性，避免引入XSS漏洞。

• 方案3：提前定义前端执行入口（推荐）
  安全性最高的方案是不在后端返回完整函数声明，提前在前端全局定义好固定的执行钩子，后端只返回需要的业务参数，前端拿到参数后调用本地预定义的逻辑处理，从根源上避免动态执行远程脚本的安全风险。

注意：所有动态执行远程返回JS的实现方式都存在XSS攻击风险，生产环境使用时必须做好接口内容校验、权限控制，避免执行恶意代码。

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