JS中修改Iframe的src后，如何获取其新的文档内容？

核心原因 #

你遇到的问题本质是iframe加载页面是异步操作，修改src后立刻访问contentDocument时，新页面还未完成加载，自然拿不到正确的文档内容。

正确的实现方式 #

不管是修改已有iframe的src，还是创建新iframe，都要等iframe的load事件触发后，再去访问内部文档：

1. 修改已有iframe的src #

const iframe = document.querySelector('iframe');
iframe.src = "pages/home/home.html";

// 监听load事件，页面加载完成后再获取文档
iframe.addEventListener('load', () => {
  const innerDoc = iframe.contentDocument || iframe.contentWindow.document;
  // 此处可正常操作新页面内容
  console.log(innerDoc.body);
});

注意：若多次切换src，建议使用一次性事件监听避免重复触发：

iframe.addEventListener('load', () => {
  const innerDoc = iframe.contentDocument || iframe.contentWindow.document;
  // 处理逻辑
}, { once: true }); // 事件仅触发一次

2. 创建新iframe并获取文档 #

const i = document.createElement('iframe');
i.src = 'pages/home/home.html';

// 先绑定load事件，再添加到页面
i.addEventListener('load', () => {
  const innerDoc = i.contentDocument || i.contentWindow.document;
  console.log(innerDoc.body);
}, { once: true });

document.body.appendChild(i);

替代方案：无需iframe的页面切换方式 #

若你的核心需求是让主JS持续运行并切换页面内容，iframe并非最优解，推荐以下两种思路：

1. 用fetch加载HTML片段并替换 #

直接通过fetch请求目标页面HTML，替换页面指定区域内容：

async function loadPage(url) {
  const response = await fetch(url);
  const html = await response.text();
  // 替换内容容器（示例为id=page-container的元素）
  document.getElementById('page-container').innerHTML = html;
  
  // 若页面包含需执行的脚本，需单独提取并执行
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  const scripts = doc.querySelectorAll('script');
  scripts.forEach(script => {
    const newScript = document.createElement('script');
    newScript.textContent = script.textContent;
    document.body.appendChild(newScript);
  });
}

// 调用示例
loadPage('pages/home/home.html');

这种方式无需iframe，主JS全程保持运行，还能更灵活地控制页面内容。

2. 单页应用路由方案 #

若项目规模较大，可使用哈希路由（window.location.hash）或History API实现单页路由，配合模板引擎渲染页面内容，这是现代单页应用的标准做法，完全无需依赖iframe。

哈希路由简单实现示例：

// 监听哈希变化
window.addEventListener('hashchange', () => {
  const pageUrl = `pages${window.location.hash.slice(1)}/index.html`;
  loadPage(pageUrl); // 复用上述loadPage函数
});

// 初始加载
window.addEventListener('load', () => {
  const initialHash = window.location.hash || '#home';
  const pageUrl = `pages${initialHash.slice(1)}/index.html`;
  loadPage(pageUrl);
});

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