Electron中如何用electron-tabs实现主窗口向标签webview的跨进程通信

• 变量名拼写错误：代码中调用发送逻辑时误用了*未定义的circuitTabs*变量，实际存储标签实例的数组是tabs，调用时会直接抛出未定义错误，消息完全无法触发发送逻辑
• 消息发送时机错误：刚调用tabGroup.addTab()时，返回的Tab实例对应的webview组件还未完成页面加载、ipc监听逻辑也未绑定完成，此时直接调用webview.send()会因为通信通道未就绪丢失消息
• 主进程代码遗漏：main.js中未导入path模块，会导致主窗口加载路径解析失败、窗口无法正常启动
• 安全配置不匹配：Electron v12及以上版本默认开启contextIsolation和沙箱机制，仅设置nodeintegration: true会导致webview内的ipcRenderer接口无法正常使用

主进程 main.js #

const electron = require('electron');
const {app, BrowserWindow} = electron;
// 补全缺失的path模块导入
const path = require('path');

let mainWindow = null;

app.on('ready', function () {
    mainWindow = new electron.BrowserWindow({
        width: 1200,
        height: 800,
        webPreferences: {
            nodeIntegration: true,
            webviewTag: true,
            // 关闭上下文隔离，匹配electron-tabs组件的运行要求
            contextIsolation: false,
            // 关闭沙箱，保证nodeintegration配置生效
            sandbox: false
        }
    });

    mainWindow.loadURL(path.join(__dirname, '/mainWindow.html'));
    mainWindow.on('ready-to-show', function () {
        mainWindow.show();
        mainWindow.focus();
    });
});

主窗口 mainWindow.html #

<html>
<head></head>
<body>
<div class="etabs-tabgroup" >
  <div class="etabs-tabs" ></div>
  <div class="etabs-buttons" style="padding:5px 0px"></div>
</div>
<div class="etabs-views"></div>
<link rel="stylesheet" href="node_modules/electron-tabs/electron-tabs.css">

<script>
const TabGroup = require('electron-tabs') ;
const {ipcRenderer} = require('electron');

const tabs = [];
const tabGroup = new TabGroup();

for (let i = 0; i < 3; i++) {
    const tab = tabGroup.addTab({
        src: 'file://' + __dirname + '/tab.html',
        webviewAttributes: {
            nodeintegration: true,
            contextIsolation: false,
            sandbox: false
        },
        // 绑定webview加载完成的回调，等通道就绪后再发消息
        ready: (webview) => {
            tabs[i].webview.send('testMessage', i);
        }
    });
    tabs.push(tab);
}
</script>
</html>

标签页 tab.html #

<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  </head>
  <body>
      <script>
        const {ipcRenderer} = require('electron');
        ipcRenderer.on('testMessage', (event, i) => {
            alert(`Message from main window to tab ${i}`);
        });
      </script>
  </body>
  </html>

• 禁止在addTab的同步执行阶段直接发送消息，必须等待Tab实例的ready回调触发，确认webview加载完成、ipc通信通道建立后再调用发送接口
• webview组件的webPreferences配置必须和主窗口保持一致的隔离、沙箱设置，否则会出现ipcRenderer未定义、接口不可用的问题
• 如果使用Electron 14及以上高版本，不建议长期使用关闭安全隔离的旧配置，可改用预加载脚本模式实现安全的ipc通信，不需要调整现有跨进程通信的逻辑

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