XMLHttpRequest响应内容中的JavaScript函数无法调用问题咨询

1. <script>标签执行限制：通过innerHTML插入DOM的<script>标签不会被浏览器解析执行，这是HTML规范明确规定的安全限制，目的是避免恶意注入脚本自动运行。你在审查元素中能看到标签仅代表它被插入到了DOM树中，JS引擎不会处理内部的代码。
2. JS语法错误：PHP输出函数参数时没有给字符串类型的值加引号，最终生成的代码为print_text(Hello World!);，JS会把Hello识别为未定义的变量，就算脚本可以执行也会直接抛出语法错误，无法完成函数调用。

第一步：修复PHP端参数输出问题 #

使用json_encode()处理PHP变量输出到JS的场景，会自动添加引号、转义特殊字符，完全符合JS语法要求：

方式1修正代码 #

<?php
 $text  = "Hello World!";
 $html  = '';
 $html .= '<script>print_text(' . json_encode($text) . ');</script>';
?>

方式2修正代码 #

<script type="text/javascript">
    print_text(<?php echo json_encode($text); ?>);
</script>

第二步：修复脚本不执行问题 #

提供两种可选方案，可根据业务场景选择：

方案1：手动解析执行返回内容中的脚本 #

修改XHR响应处理逻辑，插入HTML后主动提取<script>标签，通过创建新脚本元素的方式触发执行：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    const container = document.getElementById("id");
    container.innerHTML = this.responseText;
    // 遍历所有返回的script标签，替换为可执行的新脚本元素
    const oldScripts = container.querySelectorAll("script");
    oldScripts.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);
    });
  }
};
xmlhttp.open("POST", "file.php", true);
xmlhttp.send(data);

方案2：后端返回JSON（更安全易维护，推荐） #

不返回HTML和脚本的混合内容，后端直接返回结构化的JSON数据，前端拿到数据后主动调用函数，从根源规避脚本执行问题：

后端PHP修改

<?php
$text = "Hello World!";
header("Content-Type: application/json");
echo json_encode(['text' => $text]);
?>

前端XHR逻辑修改

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    const res = JSON.parse(this.responseText);
    print_text(res.text);
  }
};
xmlhttp.open("POST", "file.php", true);
xmlhttp.send(data);

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