无需刷新页面，如何重写文档并执行脚本且保留环境变量？

可以通过AJAX获取b.html内容并手动重建页面结构+执行脚本的方式实现需求，无需修改b.html，同时保留当前页面的全局变量（如foo）。具体实现如下：

核心思路 #

1. 用fetch获取b.html的完整内容
2. 用DOMParser解析内容，分离出head和body的元素
3. 清空当前页面的head和body，替换为b.html的对应内容，自动加载外部资源（如CSS、外部JS）
4. 重新创建脚本标签并插入页面，确保内联/外部脚本正常执行（直接innerHTML插入的脚本不会触发执行）

代码实现（放在a.html的脚本中） #

var foo = 1; // 你的初始化变量

// 加载并替换为b.html内容
fetch('b.html')
  .then(res => res.text())
  .then(html => {
    // 解析b.html为DOM对象
    const parser = new DOMParser();
    const bDoc = parser.parseFromString(html, 'text/html');
    
    // 清空当前页面的head和body
    document.head.innerHTML = '';
    document.body.innerHTML = '';
    
    // 复制b.html的head资源（自动加载CSS、外部JS等）
    Array.from(bDoc.head.children).forEach(node => {
      document.head.appendChild(node.cloneNode(true));
    });
    
    // 复制b.html的body内容
    Array.from(bDoc.body.children).forEach(node => {
      document.body.appendChild(node.cloneNode(true));
    });
    
    // 重新执行b.html中的所有脚本
    const scripts = [...bDoc.querySelectorAll('script')];
    scripts.forEach(oldScript => {
      const newScript = document.createElement('script');
      
      // 处理外部脚本
      if (oldScript.src) {
        newScript.src = oldScript.src;
      } else {
        // 处理内联脚本
        newScript.textContent = oldScript.textContent;
      }
      
      // 复制脚本的属性（如type、async等）
      oldScript.attributes.forEach(attr => {
        newScript.setAttribute(attr.name, attr.value);
      });
      
      document.body.appendChild(newScript);
    });
  })
  .catch(err => console.error('加载b.html失败:', err));

为什么这个方案可行 #

• 全程在同一个window环境下执行，a.html中的foo等全局变量不会丢失，b.html的脚本可以直接访问
• 手动复制head元素，浏览器会自动加载其中的外部资源（如CSS、字体、外部JS）
• 重新创建脚本标签并插入，确保内联脚本执行、外部脚本加载并执行，解决了innerHTML插入脚本不执行的问题
• 完全保留b.html的原有结构和资源依赖，和独立打开b.html的效果一致

替代方案：使用iframe（可选） #

如果你能接受页面嵌套，可以用iframe加载b.html，然后通过window.postMessage传递foo变量，但此方案需要修改b.html添加消息监听，不符合你“无需修改b.html”的要求，仅作补充参考：

// a.html中
var foo = 1;
const iframe = document.createElement('iframe');
iframe.src = 'b.html';
iframe.style.width = '100%';
iframe.style.height = '100vh';
iframe.style.border = 'none';
document.body.innerHTML = '';
document.body.appendChild(iframe);

// 等待iframe加载完成后传值
iframe.onload = function() {
  iframe.contentWindow.postMessage({ foo: foo }, '*');
};

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