【electron】解决CS里的全屏问题

目录

解决方法及原理

效果

用原生的html即可全屏

[原生的electron api](#原生的electron api)

[wvp工程还是用它的h5 不变](#wvp工程还是用它的h5 不变)

---

解决方法及原理

1. 在主进程中启用全屏权限

在[main.js](file:///d:/java/test/cs/main.js)中增加了对全屏权限的支持：

• 在[webPreferences](file:///d:/java/test/cs/main.js#L12-L12)中添加了`fullscreenable: true`

• 在权限处理函数中允许[fullscreen](file://d:\java\test\cs\main.js#L50-L50)权限请求

• 添加了专门用于全屏控制的IPC处理程序

2. 在预加载脚本中暴露Electron原生全屏API

在[preload.js](file:///d:/java/test/cs/preload.js)中通过IPC暴露了以下方法：

• `window.electron.enterFullscreen()` - 进入全屏

• `window.electron.exitFullscreen()` - 退出全屏

• `window.electron.isFullscreen()` - 检查是否全屏状态

3. 在2.html中增加了两种全屏方法的支持

在[2.html](file:///d:/web-video-platform/wvp/static/2.html)中实现了：

• HTML5原生全屏API（适用于普通浏览器）

• Electron原生全屏API（适用于Electron环境）

• 用户可以选择使用哪种方法进行全屏操作

使用说明：

1. 在Electron应用中打开[2.html](file:///d:/web-video-platform/wvp/static/2.html)

2. 选择"Electron原生全屏"选项

3. 点击"切换全屏"按钮即可正常使用全屏功能

4. 按ESC键或再次点击按钮可退出全屏

这样修改后，在Electron环境中就可以正常使用全屏功能了。Electron原生全屏方法比HTML5 API在Electron环境中更加稳定可靠。

效果

用原生的html即可全屏

原生的electron api

wvp工程还是用它的h5 不变

即我们只是需要cs:里的 main.js里开放权限即可。