XHR中this.response无法加载JS及过渡动画失效问题咨询

我来帮你一步步拆解并解决这两个棘手的问题，先从过渡动画的问题说起：

问题1：过渡动画未生效的修复 #

你代码里已经写了document.body.style.opacity = 0，但动画没生效核心有两个原因：

1. 没有给body设置过渡属性：浏览器需要明确知道哪些CSS属性要应用过渡效果，默认是没有过渡规则的
2. 没有正确利用transitionend事件：直接修改innerHTML会打断过渡流程，应该等动画完全结束后再替换页面内容

完整修复代码： #

首先，给body添加过渡样式（可以写在全局样式表或者内联style里）：

body {
  transition: opacity 0.3s ease; /* 时长和动画曲线可以按需调整 */
}

然后调整JS逻辑，正确监听过渡结束事件：

document.addEventListener('click', function(event) {
  // 过滤非可点击链接的元素
  if (event.target.tagName !== "A" || !event.target.href) return;
  event.preventDefault();

  // 触发页面淡出动画
  document.body.style.opacity = 0;

  // 定义过渡结束后的处理函数
  const handleTransitionEnd = function() {
    // 移除事件监听，避免后续重复触发
    document.body.removeEventListener('transitionend', handleTransitionEnd);
    
    const res = new XMLHttpRequest();
    res.addEventListener("load", function() {
      // 替换页面内容
      document.querySelector('html').innerHTML = this.response;
      // 页面替换完成后，触发淡入动画
      document.body.style.opacity = 1;
    });
    res.open("GET", event.target.href);
    res.send();
  };

  // 绑定过渡结束事件
  document.body.addEventListener("transitionend", handleTransitionEnd);
});

关键细节： #

• 必须先给body添加transition属性，opacity的变化才会有平滑过渡效果
• 把AJAX请求放在transitionend回调里，确保动画完全结束后再替换内容，避免视觉突兀
• 动画结束后记得移除事件监听，防止多次点击导致的重复绑定问题

问题2：AJAX加载的页面JS不运行的原因与解决 #

为什么会出现这个问题？ #

当你用innerHTML插入HTML内容时，里面的<script>标签不会被浏览器自动执行——这是浏览器的安全机制，防止恶意脚本注入。即使脚本标签被插入到DOM中，浏览器也不会主动解析执行它们。

解决方案：手动提取并执行脚本 #

在获取到this.response后，我们需要手动提取其中的script内容，创建新的script元素插入到页面中执行：

document.addEventListener('click', function(event) {
  if (event.target.tagName !== "A" || !event.target.href) return;
  event.preventDefault();

  document.body.style.opacity = 0;

  const handleTransitionEnd = function() {
    document.body.removeEventListener('transitionend', handleTransitionEnd);
    
    const res = new XMLHttpRequest();
    res.addEventListener("load", function() {
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = this.response;

      // 提取返回内容中的所有script标签
      const scripts = tempDiv.querySelectorAll('script');
      // 先替换页面HTML内容
      document.querySelector('html').innerHTML = tempDiv.innerHTML;
      // 逐个执行提取到的脚本
      scripts.forEach(script => {
        const newScript = document.createElement('script');
        // 区分处理内联脚本和外部脚本
        if (script.src) {
          newScript.src = script.src;
        } else {
          newScript.textContent = script.textContent;
        }
        // 插入到body末尾执行脚本
        document.body.appendChild(newScript);
      });

      // 页面内容就绪后触发淡入
      document.body.style.opacity = 1;
    });
    res.open("GET", event.target.href);
    res.send();
  };

  document.body.addEventListener("transitionend", handleTransitionEnd);
});

关键细节： #

• 用临时div解析返回的HTML，方便提取其中的script标签
• 先替换页面内容，再插入脚本，确保脚本执行时对应的DOM已经存在
• 分别处理内联脚本（复制textContent）和外部脚本（设置src属性），保证两种脚本都能正常执行

内容的提问来源于stack exchange，提问作者Majonez.exe