如何在单个HTML页面中依次加载多个本地HTML学习笔记页面？

纯CSS方案（无需JavaScript） #

你的核心问题是iframe布局错乱，导致多个文件无法依次垂直排列。可以用Flexbox垂直布局实现，调整如下：

修改后的CSS代码 #

body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 仅隐藏横向滚动，纵向允许滚动查看所有内容 */
}

/* 用flex容器垂直排列所有iframe */
.chapter-container {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 章节间的间距，可选 */
  padding: 20px; /* 页面内边距，可选 */
}

.chapter-container iframe {
  width: 100%;
  height: 800px; /* 根据单章内容高度调整，比如长章节设1200px，短章节设500px */
  border: 1px solid #eee; /* 可选，用来区分不同章节 */
  display: block;
}

修改后的HTML代码 #

<body>
  <div class="chapter-container">
    <iframe src="chapter01.html" frameborder="0"></iframe>
    <iframe src="chapter02.html" frameborder="0"></iframe>
    <iframe src="chapter03.html" frameborder="0"></iframe>
    <!-- 按考试需求添加第9、17章及指定作业文件 -->
  </div>
</body>

关键说明

• 移除了全局overflow: hidden，让页面可以纵向滚动查看所有章节
• Flex容器chapter-container负责统一垂直排列所有iframe，保证每个章节依次展示
• 固定高度可根据你的笔记实际内容长度灵活调整

自适应高度方案（需要JavaScript，解决固定高度不准确问题） #

如果章节内容高度差异大，固定高度会导致滚动条冗余或内容被截断，可以用JS自动获取每个iframe内容的实际高度：

CSS代码（保留flex布局） #

body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.chapter-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.chapter-container iframe {
  width: 100%;
  border: 1px solid #eee;
  display: block;
}

HTML + JavaScript代码 #

<body>
  <div class="chapter-container">
    <iframe src="chapter01.html" frameborder="0" onload="adjustHeight(this)"></iframe>
    <iframe src="chapter02.html" frameborder="0" onload="adjustHeight(this)"></iframe>
    <iframe src="chapter03.html" frameborder="0" onload="adjustHeight(this)"></iframe>
  </div>

  <script>
    function adjustHeight(iframe) {
      // 本地file协议下多数浏览器允许访问内容文档
      try {
        iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
      } catch (e) {
        // 若浏览器有同源限制，降级为固定高度
        iframe.style.height = '800px';
      }
    }
  </script>
</body>

关键说明

• 每个iframe加载完成后自动调用adjustHeight函数，将高度设为内容的实际高度
• 加入异常捕获，避免部分浏览器对本地文件的限制导致报错

额外建议（解决内容同步问题） #

为避免单个章节和合并文件的内容不一致，建议：

• 只维护单个章节的HTML文件，合并展示用上面的iframe整合页面，永远不要修改合并后的页面
• 如果需要生成单个可打印/阅读器适配的HTML文件，可使用VSCode的HTML Merge类插件一键合并，完全避免手动修改的误差

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