Electron跨HTML页面传递并显示用户输入用户名问题

嘿，我来帮你搞定这个在FILE1和FILE2之间传递用户名的需求！在Electron里，由于渲染进程之间没办法直接通信，我们需要借助主进程中转或者利用本地存储来实现，下面给你两种实用的方案：

方案一：使用Electron IPC（进程间通信）【推荐】 #

这是Electron官方推荐的跨进程通信方式，适合独立窗口之间的数据传递，安全性和可控性更高。

1. 主进程代码（main.js） #

我们需要在主进程里监听来自FILE1的用户名，然后转发给FILE2窗口：

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

let mainWindow;
let secondWindow;

function createMainWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 针对Electron 12+版本，使用preload脚本保证安全性
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true, // 默认开启，提升安全性
      nodeIntegration: false // 默认关闭，避免直接访问Node.js API
    }
  });

  mainWindow.loadFile('FILE1.html');
}

// 监听FILE1发送的用户名
ipcMain.on('send-username', (event, username) => {
  // 创建FILE2窗口
  secondWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  });

  secondWindow.loadFile('FILE2.html');

  // 等FILE2加载完成后，把用户名发送过去
  secondWindow.webContents.on('did-finish-load', () => {
    secondWindow.webContents.send('receive-username', username);
  });
});

app.whenReady().then(createMainWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

2. Preload脚本（preload.js） #

用于在渲染进程和主进程之间建立安全的通信桥：

const { ipcRenderer, contextBridge } = require('electron');

// 向渲染进程暴露安全的API
contextBridge.exposeInMainWorld('electronAPI', {
  sendUsername: (username) => ipcRenderer.send('send-username', username),
  onReceiveUsername: (callback) => ipcRenderer.on('receive-username', callback)
});

3. FILE1.html代码 #

捕获用户名并发送给主进程：

<body>
  <input type="text" id="username" placeholder="请输入用户名"><br>
  <button onclick="submitUsername()">提交并跳转</button>

  <script>
    function submitUsername() {
      const username = document.getElementById('username').value;
      if (username.trim()) {
        // 通过暴露的API发送用户名
        window.electronAPI.sendUsername(username);
        // 关闭当前FILE1窗口（可选）
        window.close();
      } else {
        alert('请输入用户名！');
      }
    }
  </script>
</body>

4. FILE2.html代码 #

接收并显示用户名：

<body>
  <h1>欢迎来到FILE2页面！</h1>
  <p>当前用户：<span id="userNameDisplay"></span></p>

  <script>
    // 监听主进程发送的用户名
    window.electronAPI.onReceiveUsername((event, username) => {
      document.getElementById('userNameDisplay').textContent = username;
    });
  </script>
</body>

方案二：使用localStorage【适合同一窗口跳转】 #

如果你的场景是在同一个窗口里从FILE1跳转到FILE2（比如用window.location.href），那么利用浏览器的localStorage会更简单，因为同一源下的页面共享localStorage数据：

1. FILE1.html代码 #

存储用户名并跳转：

<body>
  <input type="text" id="username" placeholder="请输入用户名"><br>
  <button onclick="submitAndJump()">提交并跳转</button>

  <script>
    function submitAndJump() {
      const username = document.getElementById('username').value;
      if (username.trim()) {
        // 把用户名存入localStorage
        localStorage.setItem('currentUsername', username);
        // 跳转到FILE2
        window.location.href = 'FILE2.html';
      } else {
        alert('请输入用户名！');
      }
    }
  </script>
</body>

2. FILE2.html代码 #

读取并显示用户名：

<body>
  <h1>欢迎来到FILE2页面！</h1>
  <p>当前用户：<span id="userNameDisplay"></span></p>

  <script>
    window.addEventListener('load', () => {
      // 从localStorage读取用户名
      const username = localStorage.getItem('currentUsername');
      if (username) {
        document.getElementById('userNameDisplay').textContent = username;
        // 可选：用完后清除数据，避免残留
        localStorage.removeItem('currentUsername');
      } else {
        document.getElementById('userNameDisplay').textContent = '未登录用户';
      }
    });
  </script>
</body>

注意事项 #

• 如果你使用的是较旧的Electron版本（低于12），可以直接在渲染进程里require('electron')，不需要preload脚本，但不推荐，因为安全性更低。
• 用IPC方案时，记得处理窗口关闭事件，避免内存泄漏。

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