如何在Electron中通过编程触发内置的F11全屏功能？

当然可以实现！Electron 自带了控制窗口全屏状态的原生 API，完全能通过点击按钮触发和按 F11 一模一样的全屏效果，不需要依赖菜单或快捷键。下面是具体的实现方案，包含安全最佳实践的写法：

核心原理 #

Electron 的 BrowserWindow 实例提供了两个关键方法：

• isFullScreen()：判断当前窗口是否处于全屏状态
• setFullScreen(boolean)：设置窗口全屏状态（true 进入全屏，false 退出）

这两个方法组合起来就能实现和 F11 一致的切换式全屏逻辑——点击按钮时，如果当前非全屏就进入，已经全屏就退出。

完整实现示例 #

1. 主进程代码（main.js） #

主进程负责管理窗口实例，我们需要在这里监听渲染进程发来的全屏切换请求：

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

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 推荐用预加载脚本暴露API，保持contextIsolation开启（安全最佳实践）
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true
    }
  });

  mainWindow.loadFile('index.html');

  // 监听渲染进程的全屏切换指令
  ipcMain.on('toggle-fullscreen', () => {
    const currentState = mainWindow.isFullScreen();
    mainWindow.setFullScreen(!currentState);
  });
}

app.whenReady().then(createWindow);

// 处理窗口关闭的常规逻辑
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

2. 预加载脚本（preload.js） #

为了在不开启 nodeIntegration 的安全前提下，让渲染进程能和主进程通信，我们用预加载脚本暴露一个安全的API：

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

// 向渲染进程暴露安全的方法
contextBridge.exposeInMainWorld('electronAPI', {
  toggleFullscreen: () => ipcRenderer.send('toggle-fullscreen')
});

3. 渲染进程代码（index.html） #

这里就是你提供的jQuery点击逻辑，调用预加载脚本暴露的API即可：

<!DOCTYPE html>
<html>
<head>
  <title>Electron Fullscreen Demo</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
  <button class="fs-btn">切换全屏（模拟F11）</button>

  <script>
    $('.fs-btn').on("click", function(){
      // 调用预加载脚本暴露的全屏切换方法
      window.electronAPI.toggleFullscreen();
    });
  </script>
</body>
</html>

关键说明 #

• 这个实现完全模拟了F11的原生全屏行为，包括自动切换状态，初始非全屏的情况下第一次点击就会进入全屏
• 采用预加载脚本+IPC通信的方式，符合Electron新版本的安全规范，避免了开启nodeIntegration带来的安全风险
• 如果是旧版本Electron（12以下），你也可以直接在渲染进程中使用remote模块调用BrowserWindow的方法，但不推荐这种方式，因为remote模块已被标记为废弃

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