如何将PHP生成的页面结果嵌入到带导航标签的HTML页面指定区域

方案1：服务端直接嵌入（推荐，最简单无兼容问题） #

直接把你当前的.html页面后缀改为.php，在原来放iframe的位置直接引入生成文件列表的PHP逻辑即可，内容会直接和当前页面融为一体，支持复用当前页面的CSS样式，完全无缝：

• 首先把你原先生成文件列表的PHP逻辑抽离为独立的file_list.php，注意该文件只输出文件列表的HTML片段（不要输出完整的<html>、<head>、<body>等全局结构，避免嵌套HTML结构异常）
• 修改标签页部分的代码如下：

<div id="report" class="tabcontent">
  <h1>Hit refresh to see all the available files</h1>
  <?php include 'file_list.php'; ?>
</div>

方案2：前端AJAX异步加载（不需要修改当前页面后缀） #

如果不想把当前页面改为PHP后缀，可以在切换到Reports标签时用JS请求文件列表接口，把返回的内容插入到指定容器中：

1. 先给列表预留容器：

<div id="report" class="tabcontent">
  <h1>Hit refresh to see all the available files</h1>
  <div id="file-list-container"></div>
</div>

2. 在标签切换的opentab逻辑里新增加载逻辑：

function opentab(evt, tabName) {
  // 原有标签切换逻辑保留
  // ...
  if (tabName === 'report') {
    // 避免重复加载
    const listContainer = document.getElementById('file-list-container')
    if (listContainer.innerHTML === '') {
      fetch('http://localhost:8080/final/uploads')
        .then(res => res.text())
        .then(html => {
          // 如果返回的是完整HTML，只提取body内的内容，避免破坏当前页面结构
          const fragment = document.createRange().createContextualFragment(html);
          const listContent = fragment.querySelector('body') ? fragment.querySelector('body').innerHTML : html;
          listContainer.innerHTML = listContent;
        })
    }
  }
}

如果用AJAX方案，原PHP接口返回的是带完整HTML结构的内容，一定要先提取列表相关的片段再插入，否则会引入重复的<head>、<body>标签，破坏当前页面的结构和样式。

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