Electron中HTML向JavaScript传递表单变量失败，求解决方法

核心问题 #

1. 主进程重复注册IPC监听器：用setInterval反复调用checkForUpdates，会持续给search-query事件添加新监听器，不仅无效还会造成内存泄漏，IPC监听器只需注册一次即可。
2. IPC监听器参数错误：ipcMain.on的回调函数第一个参数是event对象，第二个才是接收的数据，你直接将第一个参数当作query，导致无法正确获取输入值。
3. 渲染进程未引入ipcRenderer：HTML中的脚本直接使用ipcRenderer但未从Electron模块引入，会触发ipcRenderer is not defined错误。

修复后的代码 #

渲染进程（HTML文件）

<form id="searchForm" onsubmit="search(event)" class="nodrag">
    <input type="text" id="searchBar" placeholder="输入数字">
    <input type="submit" value="提交">
</form>
<script>
    // 从Electron引入ipcRenderer（Electron 5+需在preload脚本或开启nodeIntegration）
    const { ipcRenderer } = require('electron');

    function search(event) {
        event.preventDefault();
        const query = document.getElementById('searchBar').value;
        // 验证输入是否为数字（可选）
        if (!isNaN(query)) {
            ipcRenderer.send('search-query', query);
        } else {
            console.log('请输入有效数字');
        }
    }
</script>

注意：如果你的Electron版本较新（v12+），默认禁用了nodeIntegration，需要在主进程创建窗口时配置webPreferences: { nodeIntegration: true, contextIsolation: false }，或者通过preload脚本暴露ipcRenderer（更安全）。

主进程（index.js）

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

// 创建窗口的代码示例
function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false // 若使用preload可设为true，此处为简化示例
        }
    });
    mainWindow.loadFile('index.html'); // 加载你的HTML文件
}

app.whenReady().then(() => {
    createWindow();
    // 只需注册一次IPC监听器
    ipcMain.on('search-query', (event, query) => {
        console.log(`Received search query: ${query}`);
    });
});

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

安全优化方案（可选） #

若追求更高安全性，推荐使用preload脚本而非开启nodeIntegration，示例如下：

1. 创建preload.js文件：

// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
    sendSearchQuery: (query) => ipcRenderer.send('search-query', query)
});

2. 修改HTML中的search函数：

function search(event) {
    event.preventDefault();
    const query = document.getElementById('searchBar').value;
    if (!isNaN(query)) {
        window.electronAPI.sendSearchQuery(query);
    }
}

3. 主进程创建窗口时更新配置：

webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true,
    nodeIntegration: false
}

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