Electron中mainWindow.webContents.send未被ipcRenderer.on接收问题

点击专科页面的疾病矩阵名称时，预期打开对应专科的疾病展示页，但实际主进程已接收数据，maladie.html页面无变化，控制台无输出，ipcRenderer未接收到主进程发送的dataMaladie数据。

相关代码 #

index.js #

let maladie=document.querySelectorAll('ul li');
maladie.forEach(function(el){
  el.addEventListener('click',function(e){
   let des= PathData.filter(function(ele){
      if(ele.name===el.innerText){
        return ele;
      }
    });
  let dataMaladie=des[0].Diseases;
  
  ipcRenderer.send('openmaladie-page',dataMaladie);
   e.preventDefault();
     });
 });

注：dataMaladie为对应专科的疾病数组，可正常输出

Main.js #

ipcMain.on('openmaladie-page',function(e,data){
  console.log(data);
  win.webContents.send("dataMaladie",data);
  creatWindow('maladie.html');
});

maladie.js #

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

ipcRenderer.on('dataMaladie',function(e,data){
    console.log(data);
    let con=document.querySelector('#Diseases');
    for(let i=0; i<data.length;i++){
        let li=` <li class="col-3 patho ">
        <a href="#">
                <span class="ml-4 ">${data[i]}</span>
        </a>    
     </li>`;
     con.append(li);
    }
});

1. IPC消息发送时机错误 #

当前主进程先向旧窗口（win对应的窗口）发送消息，再创建新窗口，此时新窗口尚未完成初始化，根本无法接收消息。需要等待新窗口加载完成后，向其webContents发送数据。

修改Main.js代码：

// 定义变量存储新窗口实例
let maladieWindow = null;

ipcMain.on('openmaladie-page',function(e,data){
  console.log(data);
  // 创建新窗口并保存实例
  maladieWindow = creatWindow('maladie.html');
  // 监听新窗口页面加载完成事件
  maladieWindow.webContents.on('did-finish-load', () => {
    // 向新窗口发送数据
    maladieWindow.webContents.send("dataMaladie", data);
  });
});

注：需确保creatWindow函数返回创建的窗口实例，若原函数未返回，可修改如下：

function creatWindow(htmlPath) {
  let win = new BrowserWindow({
    // 窗口配置参数
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false // 根据Electron版本调整，确保可正常使用ipcRenderer
    }
  });
  win.loadFile(htmlPath);
  return win;
}

2. 页面DOM渲染方式错误 #

maladie.js中使用con.append(li)时，li是字符串格式，append方法会将其当作纯文本节点插入，不会解析为HTML元素。需改用innerHTML拼接或创建DOM元素后插入。

修改maladie.js代码（innerHTML方式）：

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

ipcRenderer.on('dataMaladie',function(e,data){
    console.log(data);
    let con=document.querySelector('#Diseases');
    // 清空容器（避免重复添加内容）
    con.innerHTML = '';
    let liHtml = '';
    for(let i=0; i<data.length;i++){
        liHtml += ` <li class="col-3 patho ">
        <a href="#">
                <span class="ml-4 ">${data[i]}</span>
        </a>    
     </li>`;
    }
    // 一次性插入HTML内容
    con.innerHTML = liHtml;
});

或更安全的DOM元素创建方式（避免XSS风险）：

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

ipcRenderer.on('dataMaladie',function(e,data){
    console.log(data);
    let con=document.querySelector('#Diseases');
    con.innerHTML = ''; // 清空容器
    data.forEach(disease => {
        const li = document.createElement('li');
        li.className = 'col-3 patho';
        const a = document.createElement('a');
        a.href = '#';
        const span = document.createElement('span');
        span.className = 'ml-4';
        span.textContent = disease;
        a.appendChild(span);
        li.appendChild(a);
        con.appendChild(li);
    });
});

内容的提问来源于stack exchange，提问作者Mohamed Lamin Mahmoudi