如何实现HTML iframe刷新后保持页面状态？附代码及文件对应说明

主页面（假设为 fileA.html） #

修改iframe结构并添加页面状态同步的JS：

<h1>主页面标题</h1>

<div class="content">
   <iframe id="mainIframe" src="/fileB.html"></iframe>
</div>

<script>
// 页面加载时，从URL hash读取上次记录的页面，设置iframe源
window.addEventListener('load', () => {
  const iframe = document.getElementById('mainIframe');
  const targetPage = window.location.hash.slice(1) || 'fileB.html';
  iframe.src = `/${targetPage}`;
});

// 监听iframe加载完成，更新URL hash记录当前页面
document.getElementById('mainIframe').addEventListener('load', function() {
  const currentPage = this.src.split('/').pop();
  window.location.hash = currentPage;
});

// 监听URL hash变化，同步更新iframe内容
window.addEventListener('hashchange', () => {
  const iframe = document.getElementById('mainIframe');
  const targetPage = window.location.hash.slice(1) || 'fileB.html';
  if (iframe.src.split('/').pop() !== targetPage) {
    iframe.src = `/${targetPage}`;
  }
});
</script>

这段JS归属fileA.html，负责初始化iframe状态、同步页面记录到URL、响应URL变化更新iframe。

fileB.html 修改链接逻辑 #

将原直接跳转的链接改为通过JS同步状态的形式：

<a href="javascript:void(0)" onclick="loadTargetPage('fileC.html')">跳转到fileC</a>

<script>
function loadTargetPage(pagePath) {
  // 修改主页面的URL hash，记录要跳转的页面
  window.parent.location.hash = pagePath;
  // 直接更新当前iframe的内容
  window.location.href = `/${pagePath}`;
}
</script>

这段JS归属fileB.html，负责点击链接时同步页面状态到主页面的URL。

核心逻辑 #

通过URL的hash（#后的内容）持久化iframe当前显示的页面路径：

1. 主页面加载/刷新时，读取hash值设置iframe的源，避免回到初始页面
2. 点击iframe内的链接时，先更新主页面的hash再跳转，把当前状态记录到URL
3. 监听hash变化，确保手动修改URL也能同步更新iframe内容

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