基于JSON的学生登录系统跳转后页面空白，如何等待页面加载完成执行脚本？

你的空白页面问题核心不是“暂停脚本等待页面加载”，而是你在登录页面的脚本里试图操作新页面（test.html）的DOM元素，同时没有把用户数据传递到新页面，代码里还有几个逻辑错误：

核心问题点 #

• 用window.open("/test.html")打开新页面后，立刻调用document.getElementById操作的是当前登录页面的DOM，test.html里的元素在当前页面根本不存在，所以这些赋值完全无效。
• 循环for (let i = 0; i < res.length; i++)里重复调用window.open，会打开多个test.html页面，完全没必要。
• 没有把验证通过的用户数据传递到test.html，导致新页面没有数据可以渲染，自然显示空白。

修复步骤 #

1. 修改登录页面的JS代码

去掉错误的DOM操作，把用户数据通过localStorage传递（比URL参数更适合传递对象数据），然后跳转到test.html：

document.querySelector('form').addEventListener('submit', (evt) => {
  evt.preventDefault();
  let usernameContent = document.querySelector('#input-login').value;
  let pwContent = document.querySelector('#input-pw').value;
  tryusername(usernameContent, pwContent);
})

function tryusername(username, password) {
  fetch('db.json').then(response => response.json()).then(data => {
    // 用find代替forEach，找到匹配的用户后直接停止遍历
    const matchedUser = data.find(element => element.username === username);
    
    if (!matchedUser) {
      alert('login not registered');
      return;
    }

    if (password === matchedUser.password) {
      clearInputs();
      // 将用户数据存入localStorage，转成JSON字符串
      localStorage.setItem('currentUser', JSON.stringify(matchedUser));
      // 在当前窗口跳转到test.html，符合登录跳转的常规交互
      window.location.href = "/test.html";
    } else {
      alert('password incorrect. access denied');
      clearInputs();
    }
  })
}

function clearInputs() {
  document.querySelector('#input-login').value = '';
  document.querySelector('#input-pw').value = '';
}

2. 给test.html添加渲染逻辑

在test.html里添加脚本，等待页面加载完成后，从localStorage取出用户数据并渲染到页面：

<!DOCTYPE html>
<html>
<head>
  <title>个人详情</title>
</head>
<body>
  <h1>个人详情</h1>
  <p>用户名: <span id="User"></span></p>
  <p>名字: <span id="FirstNamee"></span></p>
  <p>邮箱: <span id="Email"></span></p>
  <p>姓氏: <span id="LastName"></span></p>
  <p>ID: <span id="ID"></span></p>
  <p>手机号: <span id="Mobile"></span></p>
  <p>类型: <span id="Type"></span></p>
  <p>部门: <span id="department"></span></p>
  <p>年级: <span id="Year"></span></p>

  <script>
    // 等待页面DOM完全加载后执行渲染
    document.addEventListener('DOMContentLoaded', () => {
      // 从localStorage取出用户数据
      const currentUser = JSON.parse(localStorage.getItem('currentUser'));
      
      if (!currentUser) {
        // 无数据时跳回登录页
        window.location.href = "/login.html";
        return;
      }

      // 渲染数据到页面（注意键名要和你db.json里的字段完全一致）
      document.getElementById("User").textContent = currentUser.username;
      document.getElementById("FirstNamee").textContent = currentUser.FirstName;
      document.getElementById("Email").textContent = currentUser.Email;
      document.getElementById("LastName").textContent = currentUser.LastName;
      document.getElementById("ID").textContent = currentUser.ID;
      document.getElementById("Mobile").textContent = currentUser.Mobile;
      document.getElementById("Type").textContent = currentUser.Type;
      document.getElementById("department").textContent = currentUser.department;
      document.getElementById("Year").textContent = currentUser.Year;

      // 可选：渲染完成后清除localStorage数据，避免直接访问test.html
      localStorage.removeItem('currentUser');
    });
  </script>
</body>
</html>

额外优化点 #

• 用Array.find()代替forEach遍历用户数据，找到匹配项后直接停止，性能更优。
• 用textContent代替innerHTML，避免XSS风险，更安全。
• test.html添加了无数据时跳转回登录页的逻辑，提升基础安全性。

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