Electron中IpcMain与IpcRenderer通信异常求助

问题背景 #

我正在尝试修改webview的src属性，程序包含两个HTML页面：

• page1有输入框，按下回车或点击按钮后跳转至page2
• page2中的webview需要展示输入框搜索内容的结果

使用IpcRenderer和IpcMain实现通信，但通信功能失效，相关代码细节：

1. input.js：监听输入框回车与按钮点击事件，通过ipcRenderer.send('search', query)发送内容到index.js，此步骤参数传递正常
2. preload.js：通过contextBridge暴露ipcRenderer接口，解决require('electron')的调用问题
3. index.js：接收search事件后生成搜索URL，加载searchPage.html，随后用event.sender.send('search-results', url)尝试传递URL，但无法发送到search.js
4. search.js：监听search-results事件修改webview的src，但接收不到URL，results变量显示undefined，Electron开发者控制台无报错

环境：Windows11，最新版Electron，已检查HTML文件与webPreferences配置，推测event.sender.send功能失效

问题根源 #

event.sender指向的是触发search事件的渲染进程（即page1的进程），而加载searchPage.html后，page2是一个全新的渲染进程，用原event.sender.send无法将消息发送到新进程。

修复方案 #

方案1：加载页面时直接传递URL参数 #

在index.js生成URL后，加载searchPage.html时将URL作为查询参数携带：

// index.js 接收search事件的逻辑
ipcMain.on('search', (event, query) => {
  const searchUrl = `https://your-search-domain.com?q=${encodeURIComponent(query)}`;
  // 加载页面并携带URL参数
  mainWindow.loadFile('searchPage.html', {
    query: { targetUrl: searchUrl }
  });
});

在search.js中直接从页面参数获取：

// search.js
window.addEventListener('DOMContentLoaded', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const targetUrl = urlParams.get('targetUrl');
  if (targetUrl) {
    document.querySelector('webview').src = targetUrl;
  }
});

方案2：用webContents.send定向发送到新进程 #

如果必须依赖IPC通信，需确保向新页面对应的webContents实例发送事件：

// index.js
ipcMain.on('search', async (event, query) => {
  const searchUrl = `https://your-search-domain.com?q=${encodeURIComponent(query)}`;
  // 等待页面加载完成
  await mainWindow.loadFile('searchPage.html');
  // 直接向当前窗口的webContents发送事件
  mainWindow.webContents.send('search-results', searchUrl);
});

同时确保preload.js正确暴露监听接口：

// preload.js
contextBridge.exposeInMainWorld('electronAPI', {
  onSearchResults: (callback) => ipcRenderer.on('search-results', callback)
});

search.js中通过暴露的接口监听：

// search.js
window.electronAPI.onSearchResults((_, url) => {
  document.querySelector('webview').src = url;
});

方案3：用本地存储临时存放URL #

如果前两种方式不适用，可将URL临时存在localStorage：

// input.js 跳转前存储URL
localStorage.setItem('tempSearchUrl', searchUrl);
// 跳转至page2后，search.js读取
window.addEventListener('DOMContentLoaded', () => {
  const targetUrl = localStorage.getItem('tempSearchUrl');
  if (targetUrl) {
    document.querySelector('webview').src = targetUrl;
    localStorage.removeItem('tempSearchUrl'); // 用完清除
  }
});

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