Electron自定义对话框上下文传递与顶层窗口获取求助

针对你遇到的两个问题，我来一步步给你实用的解决方案：

问题1：向新BrowserWindow传递上下文 #

你之前的代码问题主要出在字符串处理不当，以及没考虑Electron的上下文隔离机制（Electron 12+默认开启上下文隔离，直接操作remote对象会有安全限制）。下面给你两种可行的实现方式：

方式一：快速修正（适合简单场景，关闭上下文隔离） #

如果你的项目允许关闭上下文隔离，可以先修正executeJavaScript的字符串拼接逻辑——传递字符串类型的上下文时，必须用引号包裹，否则会被当成JS变量解析：

const { BrowserWindow } = require('electron').remote;
let popupWindow = new BrowserWindow({
  width: 400,
  height: 300,
  webPreferences: {
    enableRemoteModule: true, // Electron 14+默认关闭，需手动开启
    contextIsolation: false // 关闭上下文隔离才能直接操作window对象
  }
});

const context = "sample context";
// 用JSON.stringify处理，不管是字符串还是对象都能正确传递
popupWindow.webContents.executeJavaScript(`window.context = ${JSON.stringify(context)};`);
popupWindow.loadFile('popup.html');

之后在popup.html的脚本里，直接访问window.context就能拿到传递的值了。

方式二：安全规范的实现（开启上下文隔离，推荐） #

上下文隔离是Electron的安全最佳实践，更推荐用预加载脚本+IPC通信的方式传递上下文：

1. 给弹窗窗口配置预加载脚本（popup-preload.js）：

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

// 向渲染进程暴露安全的API
contextBridge.exposeInMainWorld('popupAPI', {
  // 用Promise接收上下文
  getContext: () => new Promise(resolve => {
    ipcRenderer.once('send-context', (_, context) => resolve(context));
  })
});

2. 父窗口（主窗口）的代码：

const { BrowserWindow } = require('electron').remote;
const path = require('path');

let popupWindow = new BrowserWindow({
  width: 400,
  height: 300,
  parent: BrowserWindow.getCurrentWindow(), // 设置父窗口，让弹窗依附于主窗口
  webPreferences: {
    preload: path.join(__dirname, 'popup-preload.js'),
    contextIsolation: true, // 保持上下文隔离开启
    enableRemoteModule: true
  }
});

const context = { message: "sample context", userId: 1001 };
popupWindow.loadFile('popup.html');

// 等弹窗页面加载完成后发送上下文
popupWindow.webContents.on('did-finish-load', () => {
  popupWindow.webContents.send('send-context', context);
});

3. popup.html中的使用：

window.popupAPI.getContext().then(context => {
  console.log('拿到的上下文：', context);
  // 在这里使用上下文做业务逻辑
});

问题2：获取层级最顶层的窗口 #

要获取当前所有窗口中的顶层窗口，有两种常用方法：

方法一：获取当前聚焦的窗口（简单直接） #

通常用户正在操作的窗口就是顶层窗口，用getFocusedWindow()就能直接拿到：

const { BrowserWindow } = require('electron').remote;
const topWindow = BrowserWindow.getFocusedWindow();
// 可以验证窗口信息
console.log('顶层窗口标题：', topWindow?.getTitle());

方法二：遍历所有窗口筛选最顶层（更严谨） #

如果存在alwaysOnTop（总是置顶）的窗口，或者需要排除不可见的窗口，可以遍历所有窗口进行筛选：

const { BrowserWindow } = require('electron').remote;

const allWindows = BrowserWindow.getAllWindows();
// 筛选出可见的窗口，并找到层级最高的那个
const topMostWindow = allWindows.reduce((prevWindow, currWindow) => {
  if (!currWindow.isVisible()) return prevWindow;
  // 优先选择alwaysOnTop的窗口，否则比较z-index
  if (!prevWindow || currWindow.isAlwaysOnTop() || currWindow.getBounds().zIndex > prevWindow.getBounds().zIndex) {
    return currWindow;
  }
  return prevWindow;
}, null);

if (topMostWindow) {
  console.log('最顶层窗口ID：', topMostWindow.id);
}

如果你的弹窗都是主窗口的子窗口（设置了parent属性），也可以通过BrowserWindow.getCurrentWindow().getChildWindows()获取所有直接子窗口，再递归遍历子窗口的子窗口来找到最顶层的，但这种方式不如直接遍历所有窗口灵活。

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