如何实现表格自动填充Dinamico下HTML及切换iframe模板？

我来帮你实现这两个需求，下面分步骤讲解代码修改方案：

1. 自动加载"Dinamico"目录下的HTML文档到表格 #

前端JavaScript没办法直接读取本地文件系统的目录内容，这里给你两种可行方案：

方案A：后端配合返回文件列表（推荐） #

如果你的项目有后端服务，可以写一个简单接口，返回Templates/Dinamico/目录下所有HTML文件的信息（文件名、标题、描述），前端通过fetch获取数据后动态生成表格行。

示例代码：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', async function() {
  const table = document.querySelector('.table');
  try {
    // 请求后端接口获取文件列表（假设返回JSON格式）
    const response = await fetch('/api/get-dinamico-files');
    const files = await response.json();
    
    // 遍历文件生成表格行
    files.forEach(file => {
      const row = document.createElement('tr');
      row.innerHTML = `
        <td><a href="Templates/Dinamico/${file.name}">${file.title}</a></td>
        <td>${file.description}</td>
      `;
      table.appendChild(row);
    });
  } catch (error) {
    console.error('加载文件列表失败:', error);
  }
});

方案B：纯前端维护文件数组（适合静态站点） #

如果没有后端支持，你可以手动维护一个包含Dinamico目录文件信息的数组，每次新增HTML文件时更新这个数组，前端会自动生成对应的表格行：

document.addEventListener('DOMContentLoaded', function() {
  const table = document.querySelector('.table');
  // 维护Dinamico目录的文件信息，新增文件时更新这里
  const dinamicoFiles = [
    {"name": "formD1.html", "title": "Metadados Dinamico", "description": "Conteudos da Porto 2001"},
    {"name": "formD2.html", "title": "Metadados Dinamico 2", "description": "另一个动态模板的描述"}
    // 新增文件时添加新对象即可
  ];
  
  dinamicoFiles.forEach(file => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td><a href="Templates/Dinamico/${file.name}">${file.title}</a></td>
      <td>${file.description}</td>
    `;
    table.appendChild(row);
  });
});

2. 点击模板链接切换iframe内容 #

首先给目标iframe添加一个ID，方便我们快速获取元素；然后给表格里的所有模板链接绑定点击事件，切换iframe的src属性。

步骤1：修改iframe标签 #

给显示模板的iframe加上ID：

<div>
  <!-- 添加id="templateFrame" -->
  <iframe id="templateFrame" src="page.html" frameBorder="0" width="70%" height="600px" align="left" scrolling="no"></iframe>
</div>

步骤2：添加切换逻辑的JavaScript #

document.addEventListener('DOMContentLoaded', function() {
  const templateFrame = document.getElementById('templateFrame');
  const tableLinks = document.querySelectorAll('.table a');
  
  tableLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认跳转行为
      const templateUrl = this.getAttribute('href');
      
      // 跳过href为#的未配置链接
      if (templateUrl === '#') {
        alert('Este modelo ainda não tem link configurado!');
        return;
      }
      
      // 切换iframe的内容
      templateFrame.src = templateUrl;
    });
  });
});

完整整合后的代码示例 #

表格部分（嵌入页面） #

<table cellspacing="0" cellpadding="0" border="0" class="table">
  <tr>
    <th>Esquema de MetaDados</th>
    <th>Descrição</th>
  </tr>
  <tr>
    <td><a href="Templates/MetaDadosVideo/template_Video.html">Metadados Video</a></td>
    <td>Catalogação e arquivo de conteúdos de Videos de Concerto, entrevistas</td>
  </tr>
  <tr>
    <td><a href="Templates/MetaDadosGráficos/template_gráficos.html">Metadados Materiais Gráficos</a></td>
    <td>Arquivo de Materias Gráficos Finais</td>
  </tr>
  <tr>
    <td><a href="#">Metadados Porto 2001</a></td>
    <td>Conteudos da Porto 2001</td>
  </tr>
  <!-- Dinamico目录的行将由JS自动生成 -->
</table>

页面完整代码（整合所有逻辑） #

<!DOCTYPE html>
<html id="the">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../../CSS/form.css">
</head>
<body style="background-color:white;">
  <script>
    var Nome; // Nome do esquema
    var Desc; // descrição do esquema
    var temas = []; // Nome dos temas do form
    var fields = []; // nr de campos
    var FL= []; // Nome do campo
    var TF =[]; // tipo do campo

    // 页面加载完成后执行所有逻辑
    document.addEventListener('DOMContentLoaded', function() {
      // 1. 自动生成Dinamico目录的表格行（方案B示例）
      const table = document.querySelector('.table');
      const dinamicoFiles = [
        {"name": "formD1.html", "title": "Metadados Dinamico", "description": "Conteudos da Porto 2001"},
        // 新增文件时在这里添加
      ];
      
      dinamicoFiles.forEach(file => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td><a href="Templates/Dinamico/${file.name}">${file.title}</a></td>
          <td>${file.description}</td>
        `;
        table.appendChild(row);
      });

      // 2. 切换iframe模板
      const templateFrame = document.getElementById('templateFrame');
      const tableLinks = document.querySelectorAll('.table a');
      
      tableLinks.forEach(link => {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          const templateUrl = this.getAttribute('href');
          
          if (templateUrl === '#') {
            alert('Este modelo ainda não tem link configurado!');
            return;
          }
          
          templateFrame.src = templateUrl;
        });
      });
    });
  </script>
  <div>
    <iframe src="../../Resources/logo-cm__.png" frameBorder="0" width="30%" height="80px" align="left" scrolling="no"></iframe>
  </div>
  <div>
    <iframe src="../../Resources/title.png" frameBorder="0" width="60%" height="80px" align="center" scrolling="no"></iframe>
  </div>
  <div>
    <iframe id="templateFrame" src="page.html" frameBorder="0" width="70%" height="600px" align="left" scrolling="no"></iframe>
  </div>
  <div>
    <iframe src="../../galeria/frame2_galeria.html" frameBorder="0" width="29%" height="600px" align="right" scrolling="yes"></iframe>
  </div>
  <a onclick="this.href='data:text/html;charset=UTF-8,'+encodeURIComponent(document.documentElement.outerHTML)" href="#" download="page.html">Download Template</a>
</body>
</html>

这样修改后，每次你在Dinamico目录新增HTML文件，只需要更新dinamicoFiles数组；点击表格里的模板链接，中间的iframe就会自动切换到对应的模板页面啦。

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