Electron WebView中视频全屏按钮触发主窗口全屏的问题求助

我之前也踩过这个Electron WebView的坑，咱们来一步步把它搞定！

问题根源 #

Electron的WebView组件默认会把内部页面的全屏请求转发给主应用窗口，这就导致你点击视频全屏按钮时，主窗口先“抢”了全屏，而不是视频自己在WebView里全屏。另外，默认情况下WebView是不允许内部元素使用全屏API的，这也是一个容易忽略的前提条件。

解决方案 #

我给你两个可行的方案，你可以根据自己的场景选择：

方案一：拦截WebView的全屏事件（推荐）

这个方法直接从事件传递层面解决问题，步骤很清晰：

1. 给WebView添加allowfullscreen属性，允许内部页面使用全屏API
2. 监听WebView的will-enter-full-screen事件，阻止默认行为，让WebView自己处理全屏

修改你的React组件代码如下：

import React from 'react';

const YourComponent = ({ currentSrc, classes }) => {
  const getVideoFile = src => {
    const loadView = () => `
      <html>
        <body>
          <video controls style="position: absolute; top: 12px;left: 12px;height: 78%;width: 92%;outline: none;">
            <source src="${src}">
          </video>
        </body>
      </html>`;
    return `data:text/html;charset=UTF-8,${encodeURIComponent(loadView())}`;
  };

  // 处理进入全屏事件
  const handleWillEnterFullScreen = (e) => {
    // 阻止默认行为，不让主窗口全屏
    e.preventDefault();
    // 让WebView自身进入全屏模式
    e.target.setFullScreen(true);
  };

  // 处理退出全屏事件（可选，确保样式正常恢复）
  const handleWillExitFullScreen = (e) => {
    e.preventDefault();
    e.target.setFullScreen(false);
  };

  return (
    <WebView 
      src={getVideoFile(currentSrc)} 
      className={classes.webview}
      allowfullscreen  // 关键属性：开启内部全屏权限
      onWillEnterFullScreen={handleWillEnterFullScreen}
      onWillExitFullScreen={handleWillExitFullScreen}
    />
  );
};

export default YourComponent;

方案二：在内部页面直接处理全屏样式

如果你不想修改WebView的事件监听逻辑，也可以在生成的HTML页面里，通过JS直接控制视频的全屏样式，绕开Electron的默认行为：

修改你的getVideoFile函数：

const getVideoFile = src => {
  const loadView = () => `
    <html>
      <body style="margin: 0; padding: 0; overflow: hidden;">
        <video controls style="position: absolute; top: 12px;left: 12px;height: 78%;width: 92%;outline: none;">
          <source src="${src}">
        </video>
        <script>
          const video = document.querySelector('video');
          
          // 监听视频的全屏按钮点击
          video.addEventListener('click', (e) => {
            // 简单判断点击的是全屏按钮（不同浏览器的控件类名可能略有差异，可根据实际调整）
            const isFullscreenBtn = e.target.closest('button[aria-label="Full screen"]') 
              || e.target.classList.contains('fullscreen');
            
            if (isFullscreenBtn) {
              e.preventDefault();
              if (!document.fullscreenElement) {
                // 进入全屏：修改视频样式占满整个WebView
                video.style.position = 'fixed';
                video.style.top = '0';
                video.style.left = '0';
                video.style.width = '100%';
                video.style.height = '100%';
                // 请求文档全屏
                document.documentElement.requestFullscreen().catch(err => {
                  console.error('全屏失败:', err);
                });
              } else {
                // 退出全屏：恢复原样式
                document.exitFullscreen();
                video.style.position = 'absolute';
                video.style.top = '12px';
                video.style.left = '12px';
                video.style.width = '92%';
                video.style.height = '78%';
              }
            }
          });

          // 监听全屏状态变化，确保样式正确恢复
          document.addEventListener('fullscreenchange', () => {
            if (!document.fullscreenElement) {
              video.style.position = 'absolute';
              video.style.top = '12px';
              video.style.left = '12px';
              video.style.width = '92%';
              video.style.height = '78%';
            }
          });
        </script>
      </body>
    </html>`;
  return `data:text/html;charset=UTF-8,${encodeURIComponent(loadView())}`;
};

验证方法 #

修改完代码后，重新启动Electron应用，点击视频的全屏按钮，应该就能看到视频在WebView内部全屏，而主窗口不会跟着全屏了。

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