登录表单数据无法在另一页面展示的问题排查与修复

问题原因 #

• 你的JS代码里，document.querySelector("tbody")获取的是主页面的tbody，但主页面本身没有这个元素——tbody在iframe加载的index.html里，跨文档直接获取元素受浏览器同源策略限制，而且就算能获取，后续执行window.location.assign('index.html')会直接刷新页面，之前所有DOM操作都会失效。
• 没有数据传递机制：点击按钮后直接跳转页面，表单数据没有被传递到index.html，且index.html也没有读取、渲染数据的逻辑。

修复方案 #

提供两种可行方案，按需选择：

方案一：不跳转页面，直接操作iframe内的表格（保留现有iframe结构） #

既然主页面已经通过iframe嵌入了index.html，不需要跳转，直接操作iframe里的DOM即可：

修改你的sc.js代码：

const btnSend = document.getElementById("btnSend");
const nom = document.getElementById("nom");
const prenom = document.getElementById("prenom");
const age = document.getElementById("age");
// 获取iframe元素及其内部文档对象
const iframe = document.querySelector("iframe");
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

function remplir(nom, prenom, age, targetTbody) {
  let tr = document.createElement("tr");
  let tdNom = document.createElement("td");
  tdNom.textContent = nom;
  let tdPrenom = document.createElement("td");
  tdPrenom.textContent = prenom;
  let tdAge = document.createElement("td");
  tdAge.textContent = age;

  let btn = document.createElement("td");
  let suppBtn = document.createElement("button");
  suppBtn.classList.add("supp");
  suppBtn.textContent = "Supp";
  btn.appendChild(suppBtn);
  let modifBtn = document.createElement("button");
  modifBtn.classList.add("modif");
  modifBtn.textContent = "Modifier";
  btn.appendChild(modifBtn);
  
  tr.appendChild(tdNom);
  tr.appendChild(tdPrenom);
  tr.appendChild(tdAge);
  tr.appendChild(btn);
  targetTbody.appendChild(tr);
}

btnSend.addEventListener("click", ()=>{
  // 获取iframe里的tbody
  const targetTbody = iframeDoc.querySelector("tbody");
  remplir(nom.value, prenom.value, age.value, targetTbody);
  // 清空输入框
  nom.value = "";
  prenom.value = "";
  age.value = "";
});

注意：此方案要求主页面和index.html在同一域名下（本地开发用file协议也可），否则同源策略会阻止跨文档操作。

方案二：跳转页面并传递数据（适合无需iframe的场景） #

如果希望点击按钮后直接跳转到index.html并显示数据，可借助localStorage存储数据，再在index.html中读取渲染：

1. 修改主页面的sc.js代码：

const btnSend = document.getElementById("btnSend");
const nom = document.getElementById("nom");
const prenom = document.getElementById("prenom");
const age = document.getElementById("age");

btnSend.addEventListener("click", ()=>{
  // 将表单数据存入localStorage
  const userData = {
    nom: nom.value,
    prenom: prenom.value,
    age: age.value
  };
  localStorage.setItem("userData", JSON.stringify(userData));
  // 跳转到index.html
  window.location.assign('index.html');
});

2. 在index.html中添加渲染逻辑（可内嵌或引入外部JS）：

<table>
    <thead>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Age</th>
        <th>Actions</th>
    </thead>
    <tbody>
    </tbody>
</table>
<script>
function remplir(nom, prenom, age) {
  let tbody = document.querySelector("tbody");
  let tr = document.createElement("tr");
  let tdNom = document.createElement("td");
  tdNom.textContent = nom;
  let tdPrenom = document.createElement("td");
  tdPrenom.textContent = prenom;
  let tdAge = document.createElement("td");
  tdAge.textContent = age;

  let btn = document.createElement("td");
  let suppBtn = document.createElement("button");
  suppBtn.classList.add("supp");
  suppBtn.textContent = "Supp";
  btn.appendChild(suppBtn);
  let modifBtn = document.createElement("button");
  modifBtn.classList.add("modif");
  modifBtn.textContent = "Modifier";
  btn.appendChild(modifBtn);
  
  tr.appendChild(tdNom);
  tr.appendChild(tdPrenom);
  tr.appendChild(tdAge);
  tr.appendChild(btn);
  tbody.appendChild(tr);
}

// 页面加载时读取localStorage数据并渲染
window.addEventListener("load", ()=>{
  const userData = localStorage.getItem("userData");
  if(userData) {
    const {nom, prenom, age} = JSON.parse(userData);
    remplir(nom, prenom, age);
    // 渲染后清空localStorage，避免刷新重复渲染
    localStorage.removeItem("userData");
  }
});
</script>

内容的提问来源于stack exchange，提问作者TAHER El Mehdi