本文详解如何让 XMLHttpRequest（或 fetch）返回的包含 <script> 标签的 HTML 内容中定义的 JavaScript 函数真正生效并可调用，解决 innerHTML 插入后脚本不执行、函数未定义的问题。
本文详解如何让 xmlhttprequest（或 fetch）返回的包含 `<script>` 标签的 html 内容中定义的 javascript 函数真正生效并可调用，解决 `innerhtml` 插入后脚本不执行、函数未定义的问题。</script>
当通过 XMLHttpRequest 或 fetch 获取包含 <script> 标签的 HTML 字符串，并使用 element.innerHTML = responseText 插入 DOM 时，浏览器会忽略其中的 <script> 标签内容，不会自动执行或定义其中的函数——这是浏览器的安全机制与规范行为（参见 HTML 规范），并非 bug。因此，typeof injectedJS === "function" 判断必然失败。
要真正使 PHP 返回的 JS 函数可用，必须手动提取 <script> 内容并动态创建、注入 <script> 元素。以下是推荐的完整解决方案：
✅ 正确做法：解析并重执行 script 标签
function main() {
const xhttp = new XMLHttpRequest();
xhttp.open("POST", "/test2.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send('foo=bar');
// 推荐使用 onload 替代 onreadystatechange 判断
xhttp.onload = function () {
if (xhttp.status === 200) {
const div = document.getElementById('testDiv');
div.innerHTML = xhttp.responseText;
// 查找所有新插入的 <script> 标签
const scripts = div.querySelectorAll('script');
scripts.forEach(script => {
const newScript = document.createElement('script');
newScript.textContent = script.textContent; // 安全复制逻辑（避免 XSS 风险需额外校验）
script.insertAdjacentElement('afterend', newScript);
script.remove(); // 清理原始无效 script 节点
});
// 此时 injectedJS 已被定义
if (typeof injectedJS === 'function') {
console.log('✅ 函数已成功加载并可调用');
injectedJS(); // 可安全执行
} else {
console.warn('❌ 函数仍未定义，请检查 PHP 输出格式或作用域');
}
}
};
}⚠️ 注意事项：
- 不要使用 eval() 或 new Function()：虽可执行字符串代码，但存在严重 XSS 风险且破坏作用域隔离（如无法访问外部变量、this 指向异常）。
- 确保 PHP 输出纯净：test2.php 应仅输出合法 HTML + <script>，避免多余空格、BOM 或错误字符干扰解析。
- 函数作用域为全局：动态注入的脚本在全局作用域执行，因此 injectedJS 会成为 window.injectedJS，可在任意位置调用。
- 现代替代方案更优：建议迁移到 fetch() + Response.text() + DOMParser（需配合 script 注入逻辑），代码更清晰、支持 Promise 和 async/await。
✅ 更现代写法（推荐用于新项目）
async function loadDynamicScript() {
try {
const res = await fetch('/test2.php', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: 'foo=bar'
});
const html = await res.text();
const div = document.getElementById('testDiv');
div.innerHTML = html;
// 批量处理 script 标签
div.querySelectorAll('script').forEach(s => {
const script = Object.assign(document.createElement('script'), {
textContent: s.textContent
});
s.replaceWith(script); // 原位替换，语义更清晰
});
if (typeof window.injectedJS === 'function') {
injectedJS();
}
} catch (err) {
console.error('AJAX 加载失败:', err);
}
}? 补充验证技巧
若仍无法调用函数，可快速排查：
立即学习“Java免费学习笔记（深入）”；
- 在浏览器控制台执行 console.dir(window)，确认 injectedJS 是否出现在属性列表中；
- 检查 Network 面板中 /test2.php 的响应内容是否含 <script> 且无语法错误；
- 确保 PHP 输出未被其他中间件（如 gzip、缓存代理）截断或修改。
掌握这一模式，你不仅能调用远程返回的函数，还可安全集成第三方动态组件、按需加载模块化逻辑，是构建灵活前端架构的关键实践之一。
