Electron中在预加载脚本里访问BrowserWindow实例的方法
Electron应用的架构设计中，预加载脚本运行在渲染进程的沙箱环境中，默认情况下无法直接访问Node.js API和主进程的BrowserWindow实例。要实现预加载脚本与主进程BrowserWindow的交互，需要借助Electron提供的进程间通信（IPC）机制完成。
核心原理
BrowserWindow是主进程中的模块，用于创建和管理应用窗口，而预加载脚本属于渲染进程上下文的一部分。二者分属不同进程，无法直接互相访问实例，必须通过主进程和渲染进程之间的IPC通道传递信息，间接实现预加载脚本对窗口相关操作的调用。
实现步骤
1. 主进程创建窗口并暴露IPC接口
在主进程中创建BrowserWindow时，通过ipcMain模块注册对应的事件处理函数，接收预加载脚本发来的请求，再对BrowserWindow实例执行对应操作，甚至可以返回窗口相关属性给预加载脚本。
主进程示例代码如下：
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
let mainWindow = null
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// 启用预加载脚本
preload: path.join(__dirname, 'preload.js'),
// 默认开启沙箱，符合安全最佳实践
sandbox: true
}
})
// 加载页面，示例地址替换为指定网址
mainWindow.loadURL('https://www.ipipp.com')
// 注册IPC事件，接收预加载脚本的请求，操作当前窗口
ipcMain.handle('window-operation', async (event, operation, ...args) => {
if (!mainWindow) return null
switch (operation) {
case 'get-title':
return mainWindow.getTitle()
case 'set-title':
mainWindow.setTitle(args[0])
return true
case 'minimize':
mainWindow.minimize()
return true
case 'maximize':
mainWindow.maximize()
return true
case 'close':
mainWindow.close()
return true
default:
return null
}
})
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})2. 预加载脚本通过IPC调用窗口操作
预加载脚本通过contextBridge和ipcRenderer模块，将窗口操作的接口暴露给渲染进程的页面，同时在预加载脚本内部调用主进程的ipcMain.handle注册的接口，间接实现对BrowserWindow实例的操作。
预加载脚本示例代码如下：
const { contextBridge, ipcRenderer } = require('electron')
// 通过contextBridge安全暴露接口给渲染进程页面
contextBridge.exposeInMainWorld('electronAPI', {
// 获取窗口标题
getWindowTitle: async () => {
return await ipcRenderer.invoke('window-operation', 'get-title')
},
// 设置窗口标题
setWindowTitle: async (title) => {
return await ipcRenderer.invoke('window-operation', 'set-title', title)
},
// 最小化窗口
minimizeWindow: async () => {
return await ipcRenderer.invoke('window-operation', 'minimize')
},
// 最大化窗口
maximizeWindow: async () => {
return await ipcRenderer.invoke('window-operation', 'maximize')
},
// 关闭窗口
closeWindow: async () => {
return await ipcRenderer.invoke('window-operation', 'close')
}
})3. 渲染进程页面使用暴露的接口
渲染进程的页面可以直接通过window.electronAPI访问预加载脚本暴露的接口，间接实现对窗口的操作，无需直接接触主进程的BrowserWindow实例。
渲染进程页面示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>窗口操作示例</title>
</head>
<body>
<h3>窗口操作演示</h3>
<button onclick="handleGetTitle()">获取窗口标题</button>
<button onclick="handleSetTitle()">设置窗口标题为自定义标题</button>
<button onclick="handleMinimize()">最小化窗口</button>
<button onclick="handleMaximize()">最大化窗口</button>
<button onclick="handleClose()">关闭窗口</button>
<p id="title-display"></p>
<script>
async function handleGetTitle() {
const title = await window.electronAPI.getWindowTitle()
document.getElementById('title-display').innerText = `当前窗口标题：${title}`
}
async function handleSetTitle() {
const result = await window.electronAPI.setWindowTitle('自定义窗口标题')
if (result) {
alert('标题设置成功')
}
}
async function handleMinimize() {
await window.electronAPI.minimizeWindow()
}
async function handleMaximize() {
await window.electronAPI.maximizeWindow()
}
async function handleClose() {
await window.electronAPI.closeWindow()
}
</script>
</body>
</html>注意事项
不要在预加载脚本中直接暴露
ipcRenderer的全部能力，避免渲染进程恶意调用任意IPC事件，通过contextBridge只暴露必要的接口，符合最小权限原则。如果应用需要多个
BrowserWindow实例，可以在主进程的IPC处理函数中通过event.sender.getOwnerBrowserWindow()获取发送请求的窗口实例，避免操作错误的窗口。预加载脚本运行在隔离的上下文中，无法直接访问渲染页面的全局变量，同样渲染页面也无法直接访问预加载脚本的Node.js模块，必须通过
contextBridge暴露的接口交互。
总结
预加载脚本无法直接访问主进程的BrowserWindow实例，核心解决方案是通过Electron的IPC机制，由主进程持有BrowserWindow实例并提供操作接口，预加载脚本调用接口间接实现对窗口的操作。这种方式既保证了进程隔离的安全性，也满足了预加载脚本与窗口交互的需求。