AJAX调用含JavaScript的HTML页面后JS未执行，如何解决？

这是AJAX加载外部HTML时非常常见的问题——当你直接把xhr.responseText插入到页面的innerHTML中，浏览器只会渲染其中的HTML元素，但不会自动执行里面的<script>标签代码，这是浏览器的安全机制和innerHTML的处理逻辑决定的。

下面给你两种可行的解决方案：

方案1：手动提取并执行脚本内容 #

修改你index.html中的onreadystatechange回调函数，在插入HTML内容后，主动提取并执行所有<script>标签里的代码：

<script>
var xhr= new XMLHttpRequest();
xhr.onreadystatechange= function(){
  if(xhr.readyState === 4 && xhr.status === 200){ // 记得加上状态码判断，确保请求成功
    const ajaxContainer = document.getElementById('ajax');
    // 先插入HTML内容到页面
    ajaxContainer.innerHTML= xhr.responseText;
    
    // 提取容器内所有script标签并执行
    const scripts = ajaxContainer.getElementsByTagName('script');
    for(let i = 0; i < scripts.length; i++){
      const scriptContent = scripts[i].textContent || scripts[i].innerText;
      // 创建新的script元素插入到页面，浏览器会自动执行它
      const newScript = document.createElement('script');
      newScript.textContent = scriptContent;
      document.head.appendChild(newScript);
      // 执行完成后可以移除这个临时script，避免冗余
      document.head.removeChild(newScript);
    }
  }
};
xhr.open('POST','x.html');
function startAjax(){
  xhr.send();
  document.getElementById('hide_button').style.display= 'none';
}
</script>
<body>
<button id='hide_button' onclick='startAjax()'>Start</button>
<div id='ajax'></div>
</body>

为什么这样有效？ #

当你通过innerHTML插入带<script>的HTML时，浏览器不会解析执行这些脚本；但如果你把脚本内容提取出来，创建一个全新的<script>元素并插入到文档中，浏览器就会识别并执行它的内容。

方案2：使用DOMParser解析完整HTML文档 #

如果x.html的<script>标签在<head>里（像你例子中那样），可以用DOMParser先解析整个HTML文档，再分别处理页面内容和脚本：

<script>
var xhr= new XMLHttpRequest();
xhr.onreadystatechange= function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    const parser = new DOMParser();
    // 把响应文本解析成完整的HTML文档
    const htmlDoc = parser.parseFromString(xhr.responseText, 'text/html');
    
    // 插入<body>里的内容到页面
    document.getElementById('ajax').innerHTML = htmlDoc.body.innerHTML;
    
    // 提取<head>里的脚本并执行
    const headScripts = htmlDoc.head.getElementsByTagName('script');
    for(let script of headScripts){
      const newScript = document.createElement('script');
      newScript.textContent = script.textContent;
      document.head.appendChild(newScript);
    }
  }
};
xhr.open('POST','x.html');
function startAjax(){
  xhr.send();
  document.getElementById('hide_button').style.display= 'none';
}
</script>
<body>
<button id='hide_button' onclick='startAjax()'>Start</button>
<div id='ajax'></div>
</body>

重要提醒：安全问题 #

如果你加载的x.html是完全由你自己控制的内容，那么以上方法都没问题；但如果是来自第三方的不可信内容，直接执行脚本会有XSS跨站脚本攻击的风险，这种情况下请谨慎处理，避免执行未知代码。

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