React+Electron运行时切换窗口alwaysOnTop属性的技术问题

核心原因是Electron的主进程与渲染进程相互隔离，React运行在渲染进程中，无法直接访问主进程的BrowserWindow实例，必须通过**IPC（进程间通信）**实现主窗口属性的切换。

步骤1：主进程保存主窗口引用并监听IPC事件 #

在主进程文件（通常是main.js/main.ts）中，创建窗口后保留实例引用，同时监听渲染进程发来的切换事件：

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

let mainWindow; // 保存主窗口实例

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    alwaysOnTop: true, // 默认置顶
    webPreferences: {
      contextIsolation: true, // 开启上下文隔离（安全最佳实践）
      preload: path.join(__dirname, 'preload.js') // 预加载脚本路径
    }
  });

  // 加载React应用（开发环境加载本地服务，生产环境加载打包后的html）
  mainWindow.loadURL(process.env.NODE_ENV === 'development' 
    ? 'http://localhost:3000' 
    : `file://${path.join(__dirname, '../build/index.html')}`);
}

// 监听渲染进程的切换置顶请求
ipcMain.on('toggle-always-on-top', () => {
  if (mainWindow) {
    const currentState = mainWindow.isAlwaysOnTop();
    mainWindow.setAlwaysOnTop(!currentState);
  }
});

app.whenReady().then(createWindow);

步骤2：编写预加载脚本暴露API #

创建preload.js文件，通过contextBridge向渲染进程安全暴露IPC调用方法：

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

contextBridge.exposeInMainWorld('electronAPI', {
  toggleAlwaysOnTop: () => ipcRenderer.send('toggle-always-on-top')
});

步骤3：React组件中调用API实现切换 #

在React组件里，直接通过window.electronAPI调用暴露的方法，无需导入Electron模块：

function App() {
  const handleToggleTop = () => {
    window.electronAPI.toggleAlwaysOnTop();
  };

  return (
    <div style={{ padding: '20px' }}>
      <button onClick={handleToggleTop}>
        切换窗口置顶状态
      </button>
    </div>
  );
}

export default App;

额外说明 #

如果你的项目没有开启上下文隔离（contextIsolation: false），也可以直接在React中导入ipcRenderer调用，但这种方式不符合Electron安全规范，不推荐：

import { ipcRenderer } from 'electron';

// 按钮点击事件
const handleToggleTop = () => {
  ipcRenderer.send('toggle-always-on-top');
};

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