Electron如何显示/隐藏标题栏的关闭、最大化、最小化按钮

该需求完全可以实现，核心实现逻辑为：视频进入全屏播放状态时，置顶播放层并阻断窗口原生控件的操作路径，用户点击播放器自带的关闭按钮退出全屏后，再恢复原生控件的可操作状态。

方案1：Electron原生API配置（优先推荐，兼容性最优，开发量最小） #

• 视频触发全屏播放时，调用当前窗口实例的setAlwaysOnTop(true, 'screen-saver')方法，将窗口层级提升至系统最高级，避免被其他软件、系统弹窗遮挡
• 同步调用三个窗口控制方法禁用原生控件：setClosable(false)（禁用关闭按钮）、setMinimizable(false)（禁用最小化按钮）、setMaximizable(false)（禁用最大化按钮），此时系统原生标题栏的三个按钮会处于置灰不可点击状态，用户无法触发对应操作
• 给播放器自带的关闭按钮绑定退出逻辑：退出全屏时反向调用上述接口，setAlwaysOnTop(false)恢复普通窗口层级，同时将三个控件的权限重新设为true，即可恢复原生窗口的正常操作
• 参考代码片段：

const { BrowserWindow } = require('electron')
const currentWin = BrowserWindow.getFocusedWindow()

// 进入视频全屏时执行
const onEnterVideoFullscreen = () => {
  currentWin.setAlwaysOnTop(true, 'screen-saver')
  currentWin.setClosable(false)
  currentWin.setMinimizable(false)
  currentWin.setMaximizable(false)
}

// 点击播放器自带关闭按钮时执行
const onExitVideoFullscreen = () => {
  currentWin.setAlwaysOnTop(false)
  currentWin.setClosable(true)
  currentWin.setMinimizable(true)
  currentWin.setMaximizable(true)
}

• 适配提示：macOS系统下需要提前在窗口初始化配置中设置正确的titleBarStyle参数，避免禁用控件时出现标题栏交互异常。

方案2：无边框窗口自定义标题栏（交互灵活度最高） #

• 初始化窗口时设置frame: false，移除系统原生标题栏，自行实现标题栏样式及最小化、最大化、关闭按钮的交互逻辑
• 视频进入全屏时，在渲染层将播放容器的z-index设为最高值，覆盖整个窗口区域（包括自定义标题栏），从视觉和交互层完全阻断用户接触窗口操作控件的路径
• 该方案优势是可以自定义全屏状态下的所有交互样式，不受系统原生窗口规则限制；缺点是需要自行实现窗口拖动、边缘缩放等原生标题栏自带的能力，开发量相对更大。

方案3：模态子窗口承载全屏播放内容（逻辑隔离性最好） #

• 视频触发全屏时，新建一个配置为modal: true、fullscreen: true、alwaysOnTop: true的BrowserWindow子窗口，将视频播放内容迁移到该子窗口中渲染
• 模态窗口的原生特性为：子窗口未关闭时，用户无法对父窗口进行任何操作，包括点击父窗口的原生控件，天然匹配需求逻辑
• 注意事项：需要做好父子窗口间的播放状态同步，避免切换窗口时出现播放进度丢失、音画不同步的问题。

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