鸿蒙常见问题分析五十三：Web组件加载H5页面视频全屏失效

《HarmonyOS Web组件视频全屏问题解决方案》摘要：本文针对HarmonyOS Web组件加载H5页面时视频全屏按钮置灰问题，深入分析问题根源并提供完整解决方案。文章首先阐述了iframe安全策略与浏览器兼容性对全屏功能的影响机制，指出缺少allowfullscreen属性声明是导致问题的关键原因。随后提供了三种解决方案：1)完整声明全屏权限属性（推荐方案）；2)JavaScript动态

m0_59315734

67人浏览 · 2026-03-15 00:15:36

m0_59315734 · 2026-03-15 00:15:36 发布

背景引入

在HarmonyOS应用开发中，Web组件作为连接原生应用与Web内容的重要桥梁，被广泛应用于加载H5页面、展示富文本内容、集成第三方Web服务等场景。随着移动互联网的快速发展，视频内容已成为H5页面的核心组成部分，从在线教育、电商直播到社交媒体，视频播放功能无处不在。然而，当开发者使用Web组件加载包含视频播放的H5页面时，一个看似简单却影响用户体验的问题频繁出现：视频播放器的全屏按钮呈现置灰状态，用户无法点击进入全屏模式。这种问题不仅限制了视频观看体验，更可能导致关键功能无法正常使用，直接影响应用的核心价值。问题的根源往往隐藏在对iframe安全策略和浏览器兼容性的误解中，需要深入理解Web组件的渲染机制和现代浏览器的安全策略才能彻底解决。

问题现象

典型场景描述

假设我们正在开发一款集成了在线教育功能的HarmonyOS应用，需要通过Web组件加载第三方教育平台的H5课程页面。该页面包含多个教学视频，用户需要全屏观看以获得更好的学习体验。开发者按照官方文档配置了Web组件，设置了正确的权限参数，但在真机测试时却发现所有视频的全屏按钮都是置灰状态，用户点击无效。

问题代码示例

以下是导致全屏按钮置灰问题的典型错误实现：

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  
  build() {
    Column() {
      Web({
        src: $rawfile('education.html'),
        controller: this.controller
      })
      .domStorageAccess(true)
      .geolocationAccess(false)
      .fileAccess(false)
      .width('100%')
      .height('100%');
    }
    .width('100%')
    .height('100%');
  }
}

对应的H5页面代码（education.html）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线教育平台</title>
</head>
<body>
    <div style="width: 100%; height: 100%;">
        <!-- ❌ 错误实现：iframe缺少全屏权限属性 -->
        <iframe 
            src="https://edu-platform.com/course/123" 
            style="width:100%; height:100%; border:none;">
        </iframe>
    </div>
</body>
</html>

问题表现特征

按钮状态异常：视频播放器的全屏按钮显示为灰色不可点击状态
功能完全失效：用户点击全屏按钮无任何响应，无法进入全屏模式
跨平台一致性：在HarmonyOS Web组件和部分桌面浏览器中表现一致
特定场景触发：主要发生在iframe嵌套的视频播放场景中
无错误提示：控制台不显示任何JavaScript错误或警告信息

问题影响范围

用户体验：无法全屏观看视频，影响内容消费体验
功能完整性：教育、直播、视频会议等依赖全屏功能的应用场景受限
商业价值：降低用户满意度和应用留存率
开发效率：开发者需要额外时间排查和解决此问题
跨平台兼容：在不同设备和浏览器上表现不一致，增加测试成本

技术原理深度解析

1. Web组件与iframe安全策略

Web组件的渲染机制

HarmonyOS Web组件基于系统WebView实现，它本质上是一个轻量级的浏览器内核，负责解析和渲染HTML、CSS、JavaScript内容。当Web组件加载H5页面时，其内部工作流程如下：

// Web组件内部渲染流程示意
Web({
  src: 'page.html',
  controller: webController
})
.onPageBegin(() => {
  // 1. 创建WebView实例
  // 2. 初始化渲染引擎
  // 3. 加载指定资源
})
.onPageEnd(() => {
  // 4. 页面加载完成
  // 5. 执行JavaScript代码
  // 6. 渲染最终界面
})

iframe的安全沙箱机制

iframe（内联框架）允许在一个HTML文档中嵌入另一个独立的HTML文档，现代浏览器为iframe实现了严格的安全沙箱机制：

主页面 (Parent Document)
    ├── 同源策略限制
    ├── 跨域通信限制
    └── 权限继承规则
        ↓
iframe (Child Document)
    ├── 独立JavaScript执行环境
    ├── 独立DOM树
    ├── 独立CSS作用域
    └── 受限的系统API访问权限

全屏API的安全限制

HTML5 Fullscreen API允许网页元素进入全屏模式，但出于安全考虑，浏览器对iframe中的全屏操作施加了额外限制：

// 标准全屏API调用
videoElement.requestFullscreen()
  .then(() => console.log('进入全屏'))
  .catch(err => console.error('全屏失败:', err));

// iframe中的限制条件：
// 1. iframe必须明确声明全屏权限
// 2. 用户手势必须源自iframe内部
// 3. 跨域iframe有额外限制

2. 浏览器安全策略分析

同源策略与权限继承

浏览器安全模型的核心是同源策略（Same-Origin Policy），iframe的全屏权限受到以下规则约束：

权限显式声明：iframe必须通过allowfullscreen属性明确请求全屏权限
用户手势要求：全屏请求必须由用户手势（如点击）直接触发
跨域限制：跨域iframe的全屏权限需要额外的CORS配置
沙箱限制：设置了sandbox属性的iframe默认禁用全屏功能

现代浏览器的安全演进

随着Web安全威胁的不断增加，主流浏览器逐步收紧了iframe的权限控制：

Chrome 70+：默认阻止跨域iframe的全屏请求
Firefox 65+：要求iframe明确声明全屏权限
Safari 13+：实施了最严格的iframe权限控制
HarmonyOS WebView：遵循主流浏览器的安全标准

3. 全屏按钮置灰的根本原因

技术栈分析

视频全屏功能失效通常涉及多个技术层面的问题：

用户界面层
    ↓ 全屏按钮点击
JavaScript事件层
    ↓ requestFullscreen()调用
浏览器API层
    ↓ 权限检查 → ❌ 缺少allowfullscreen属性
安全策略层
    ↓ 权限拒绝
用户反馈层
    ↓ 按钮置灰

具体原因分解

属性缺失：iframe标签缺少allowfullscreen属性声明
浏览器兼容：未提供浏览器前缀兼容属性（webkit、moz）
嵌套层级：多层iframe嵌套导致权限传递中断
脚本执行时机：视频播放器脚本在iframe权限检查之后加载
安全策略冲突：iframe的sandbox属性与全屏权限冲突

4. 跨浏览器兼容性分析

各浏览器全屏属性支持情况

浏览器/平台	标准属性	WebKit前缀	Mozilla前缀	备注
Chrome/Edge	allowfullscreen	webkitallowfullscreen	-	推荐同时使用
Firefox	allowfullscreen	-	mozallowfullscreen	需要moz前缀
Safari	allowfullscreen	webkitallowfullscreen	-	必须使用webkit前缀
HarmonyOS WebView	allowfullscreen	webkitallowfullscreen	mozallowfullscreen	全属性支持

属性优先级规则

当多个全屏权限属性同时存在时，浏览器按以下优先级处理：

标准allowfullscreen属性
浏览器前缀属性（webkitallowfullscreen、mozallowfullscreen）
默认安全策略（拒绝全屏请求）

解决方案

方案一：完整属性声明（推荐）

核心修复代码

在iframe标签中同时声明所有全屏权限属性，确保跨浏览器兼容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修复后的教育平台</title>
</head>
<body>
    <div style="width: 100%; height: 100%;">
        <!-- ✅ 正确实现：完整声明全屏权限属性 -->
        <iframe 
            src="https://edu-platform.com/course/123" 
            allowfullscreen="true"
            webkitallowfullscreen="true"
            mozallowfullscreen="true"
            style="width:100%; height:100%; border:none;">
        </iframe>
    </div>
</body>
</html>

属性设置原则

完整性：同时设置标准属性和浏览器前缀属性
显式声明：使用="true"明确启用权限
避免冲突：不要同时设置sandbox属性（除非明确需要）
语义化：属性值使用布尔值而非字符串

方案二：动态属性注入

JavaScript动态修复

对于无法直接修改HTML源码的场景，可以通过JavaScript动态注入全屏权限属性：

// 动态修复iframe全屏权限
function fixIframeFullscreenPermission() {
  const iframes = document.querySelectorAll('iframe');
  
  iframes.forEach(iframe => {
    // 检查是否已设置全屏权限
    if (!iframe.hasAttribute('allowfullscreen')) {
      // 设置所有全屏权限属性
      iframe.setAttribute('allowfullscreen', 'true');
      iframe.setAttribute('webkitallowfullscreen', 'true');
      iframe.setAttribute('mozallowfullscreen', 'true');
      
      console.log('已修复iframe全屏权限:', iframe.src);
    }
    
    // 监听iframe加载完成
    iframe.addEventListener('load', () => {
      // 尝试修复iframe内部的iframe
      try {
        const innerDoc = iframe.contentDocument || iframe.contentWindow.document;
        const innerIframes = innerDoc.querySelectorAll('iframe');
        
        innerIframes.forEach(innerIframe => {
          if (!innerIframe.hasAttribute('allowfullscreen')) {
            innerIframe.setAttribute('allowfullscreen', 'true');
            innerIframe.setAttribute('webkitallowfullscreen', 'true');
            innerIframe.setAttribute('mozallowfullscreen', 'true');
          }
        });
      } catch (e) {
        // 跨域限制，无法访问内部文档
        console.warn('无法修复跨域iframe的内部权限:', e.message);
      }
    });
  });
}

// 页面加载完成后执行修复
document.addEventListener('DOMContentLoaded', fixIframeFullscreenPermission);

兼容性处理

// 检测浏览器支持的全屏属性前缀
function getFullscreenAttributePrefix() {
  const prefixes = ['', 'webkit', 'moz', 'ms'];
  
  for (const prefix of prefixes) {
    const attributeName = prefix ? `${prefix}allowfullscreen` : 'allowfullscreen';
    const testElement = document.createElement('div');
    
    if (testElement[attributeName] !== undefined) {
      return prefix;
    }
  }
  
  return null;
}

// 智能设置全屏属性
function setSmartFullscreenAttributes(iframeElement) {
  const prefix = getFullscreenAttributePrefix();
  
  if (prefix === null) {
    console.warn('当前浏览器不支持全屏API');
    return;
  }
  
  // 设置检测到的前缀属性
  const attributeName = prefix ? `${prefix}allowfullscreen` : 'allowfullscreen';
  iframeElement.setAttribute(attributeName, 'true');
  
  // 同时设置标准属性以兼容未来版本
  iframeElement.setAttribute('allowfullscreen', 'true');
}

方案三：HarmonyOS Web组件配置优化

完整Web组件配置

在HarmonyOS端进行全面的Web组件配置，确保最佳兼容性：

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

const DOMAIN: number = 0x0000;
const TAG: string = '[WebFullscreenDemo]';

@Entry
@Component
struct WebFullscreenExample {
  @State private hasWebPermission: boolean = true;
  @State private pageLoaded: boolean = false;
  @State private currentUrl: string = $rawfile('fixed_video_page.html');
  
  private controller: webview.WebviewController = new webview.WebviewController();
  private webSetting: webview.WebSetting = webview.WebSetting.getDefault();
  
  // ==================== 生命周期 ====================
  aboutToAppear(): void {
    this.configureWebSettings();
    this.setupWebListeners();
  }
  
  // ==================== Web配置 ====================
  private configureWebSettings(): void {
    try {
      // 启用必要的Web功能
      this.webSetting.setDomStorageEnabled(true);      // DOM存储
      this.webSetting.setJavaScriptEnabled(true);      // JavaScript
      this.webSetting.setMediaPlayGestureEnabled(true); // 媒体播放手势
      
      // 全屏相关设置
      this.webSetting.setFullscreenEnabled(true);      // 启用全屏
      this.webSetting.setAllowFileAccess(true);        // 文件访问
      this.webSetting.setAllowContentAccess(true);     // 内容访问
      
      // 应用设置到控制器
      this.controller.setWebSetting(this.webSetting);
      
      hilog.info(DOMAIN, TAG, 'Web配置完成');
    } catch (error) {
      const err = error as BusinessError;
      hilog.error(DOMAIN, TAG, `Web配置失败: ${err.code}`);
    }
  }
  
  // ==================== 事件监听 ====================
  private setupWebListeners(): void {
    // 页面开始加载
    this.controller.onPageBegin((url: string) => {
      hilog.info(DOMAIN, TAG, `开始加载: ${url}`);
      this.pageLoaded = false;
    });
    
    // 页面加载完成
    this.controller.onPageEnd((url: string) => {
      hilog.info(DOMAIN, TAG, `加载完成: ${url}`);
      this.pageLoaded = true;
      
      // 注入全屏修复脚本
      this.injectFullscreenFixScript();
    });
    
    // 全屏事件监听
    this.controller.onFullscreenShow(() => {
      hilog.info(DOMAIN, TAG, '进入全屏模式');
      // 可以在这里调整UI布局
    });
    
    this.controller.onFullscreenHide(() => {
      hilog.info(DOMAIN, TAG, '退出全屏模式');
      // 恢复UI布局
    });
    
    // JavaScript错误监听
    this.controller.onConsole((message: webview.ConsoleMessage) => {
      hilog.debug(DOMAIN, TAG, `JS控制台: ${message.message}`);
    });
  }
  
  // ==================== 脚本注入 ====================
  private injectFullscreenFixScript(): void {
    const fixScript = `
      (function() {
        // 修复iframe全屏权限
        function fixIframeFullscreen() {
          const iframes = document.querySelectorAll('iframe');
          iframes.forEach(iframe => {
            if (!iframe.hasAttribute('allowfullscreen')) {
              iframe.setAttribute('allowfullscreen', 'true');
              iframe.setAttribute('webkitallowfullscreen', 'true');
              iframe.setAttribute('mozallowfullscreen', 'true');
              console.log('全屏权限已修复:', iframe.src);
            }
          });
        }
        
        // 立即执行一次
        fixIframeFullscreen();
        
        // 监听DOM变化，处理动态添加的iframe
        const observer = new MutationObserver(fixIframeFullscreen);
        observer.observe(document.body, {
          childList: true,
          subtree: true
        });
        
        // 覆盖requestFullscreen方法，添加错误处理
        const originalRequestFullscreen = Element.prototype.requestFullscreen;
        Element.prototype.requestFullscreen = function() {
          return originalRequestFullscreen.apply(this, arguments)
            .catch(error => {
              console.error('全屏请求失败:', error);
              // 尝试修复权限后重试
              fixIframeFullscreen();
              return originalRequestFullscreen.apply(this, arguments);
            });
        };
      })();
    `;
    
    try {
      this.controller.runJavaScript(fixScript);
      hilog.info(DOMAIN, TAG, '全屏修复脚本注入成功');
    } catch (error) {
      const err = error as BusinessError;
      hilog.warn(DOMAIN, TAG, `脚本注入失败: ${err.code}`);
    }
  }
  
  // ==================== UI构建 ====================
  build() {
    Column() {
      // 状态提示
      if (!this.pageLoaded) {
        Row() {
          LoadingProgress()
            .width(30)
            .height(30);
          Text('页面加载中...')
            .fontSize(14)
            .margin({ left: 10 });
        }
        .margin({ top: 20 });
      }
      
      // Web组件区域
      Web({
        src: this.currentUrl,
        controller: this.controller
      })
      .domStorageAccess(true)
      .fileAccess(true)
      .geolocationAccess(false)
      .javaScriptAccess(true)
      .onFullscreenAccess((event) => {
        // 允许全屏访问
        return true;
      })
      .width('100%')
      .height('80%')
      .backgroundColor('#F5F5F5')
      
      // 控制面板
      Column() {
        Row({ space: 20 }) {
          Button('刷新页面')
            .width(120)
            .height(40)
            .backgroundColor('#4ECDC4')
            .fontColor(Color.White)
            .onClick(() => {
              this.controller.refresh();
            });
            
          Button('检查权限')
            .width(120)
            .height(40)
            .backgroundColor('#45B7D1')
            .fontColor(Color.White)
            .onClick(() => {
              this.checkFullscreenPermission();
            });
            
          Button('测试页面')
            .width(120)
            .height(40)
            .backgroundColor('#96CEB4')
            .fontColor(Color.White)
            .onClick(() => {
              this.currentUrl = $rawfile('test_video.html');
            });
        }
        .margin({ top: 20 })
        
        // 调试信息
        if (this.pageLoaded) {
          Text('页面加载完成，全屏功能已启用')
            .fontSize(12)
            .fontColor('#666666')
            .margin({ top: 15 });
        }
      }
      .padding(20)
      .width('100%')
      .alignItems(HorizontalAlign.Center)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
  
  // ==================== 工具方法 ====================
  private async checkFullscreenPermission(): Promise<void> {
    try {
      const testScript = `
        (function() {
          const iframes = document.querySelectorAll('iframe');
          const results = [];
          
          iframes.forEach((iframe, index) => {
            const hasStandard = iframe.hasAttribute('allowfullscreen');
            const hasWebKit = iframe.hasAttribute('webkitallowfullscreen');
            const hasMoz = iframe.hasAttribute('mozallowfullscreen');
            
            results.push({
              index: index,
              src: iframe.src || '匿名iframe',
              standard: hasStandard,
              webkit: hasWebKit,
              moz: hasMoz,
              allSet: hasStandard && hasWebKit && hasMoz
            });
          });
          
          return results;
        })();
      `;
      
      const results = await this.controller.runJavaScript(testScript);
      hilog.info(DOMAIN, TAG, `权限检查结果: ${JSON.stringify(results)}`);
      
      prompt.showToast({
        message: `检查完成: ${results.length}个iframe`
      });
      
    } catch (error) {
      const err = error as BusinessError;
      hilog.error(DOMAIN, TAG, `权限检查失败: ${err.code}`);
    }
  }
}

完整示例代码

以下是一个完整的、无全屏问题的HarmonyOS Web组件实现：

1. 主页面代码 (WebFullscreenDemo.ets)

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { prompt } from '@kit.ArkUI';

const DOMAIN: number = 0x0000;
const TAG: string = '[WebFullscreenSolution]';

@Entry
@Component
struct WebFullscreenSolution {
  // 状态管理
  @State private pageLoaded: boolean = false;
  @State private showDebugInfo: boolean = false;
  @State private currentPage: string = 'video';
  
  // Web组件
  private controller: webview.WebviewController = new webview.WebviewController();
  private webSetting: webview.WebSetting = webview.WebSetting.getDefault();
  
  // 页面配置
  private pageConfigs = {
    video: {
      title: '视频播放页',
      url: $rawfile('video_player.html'),
      description: '包含iframe视频播放器的示例页面'
    },
    education: {
      title: '教育平台',
      url: $rawfile('education_platform.html'),
      description: '模拟在线教育平台的iframe嵌套场景'
    },
    live: {
      title: '直播页面',
      url: $rawfile('live_stream.html'),
      description: '直播流媒体播放测试'
    }
  };
  
  // ==================== 生命周期 ====================
  aboutToAppear(): void {
    this.initializeWebView();
  }
  
  onPageShow(): void {
    this.injectCompatibilityScript();
  }
  
  onPageHide(): void {
    this.cleanupWebResources();
  }
  
  // ==================== Web初始化 ====================
  private initializeWebView(): void {
    try {
      // 基础配置
      this.webSetting.setJavaScriptEnabled(true);
      this.webSetting.setDomStorageEnabled(true);
      this.webSetting.setDatabaseEnabled(true);
      
      // 全屏相关配置
      this.webSetting.setFullscreenEnabled(true);
      this.webSetting.setAllowFileAccess(true);
      this.webSetting.setAllowContentAccess(true);
      this.webSetting.setMediaPlayGestureEnabled(true);
      
      // 安全配置
      this.webSetting.setWebSecurityEnabled(true);
      this.webSetting.setAllowUniversalAccessFromFileURLs(false);
      
      // 性能配置
      this.webSetting.setLoadWithOverviewMode(true);
      this.webSetting.setUseWideViewPort(true);
      
      // 应用配置
      this.controller.setWebSetting(this.webSetting);
      
      // 设置事件监听
      this.setupEventListeners();
      
      hilog.info(DOMAIN, TAG, 'WebView初始化完成');
      
    } catch (error) {
      const err = error as BusinessError;
      hilog.error(DOMAIN, TAG, `初始化失败: ${err.code} - ${err.message}`);
    }
  }
  
  // ==================== 事件监听 ====================
  private setupEventListeners(): void {
    // 页面加载事件
    this.controller.onPageBegin((url: string) => {
      hilog.info(DOMAIN, TAG, `开始加载: ${url}`);
      this.pageLoaded = false;
    });
    
    this.controller.onPageEnd((url: string) => {
      hilog.info(DOMAIN, TAG, `加载完成: ${url}`);
      this.pageLoaded = true;
      
      // 注入增强脚本
      this.injectEnhancementScripts();
    });
    
    // 全屏事件
    this.controller.onFullscreenShow(() => {
      hilog.info(DOMAIN, TAG, '全屏模式激活');
      prompt.showToast({ message: '已进入全屏模式' });
    });
    
    this.controller.onFullscreenHide(() => {
      hilog.info(DOMAIN, TAG, '全屏模式关闭');
    });
    
    // 错误处理
    this.controller.onErrorReceive((error: webview.WebResourceError) => {
      hilog.error(DOMAIN, TAG, `资源错误: ${error.description}`);
    });
    
    // 控制台输出
    this.controller.onConsole((message: webview.ConsoleMessage) => {
      const levelMap = {
        0: 'DEBUG',
        1: 'LOG',
        2: 'WARN',
        3: 'ERROR'
      };
      
      hilog.debug(DOMAIN, TAG, 
        `[${levelMap[message.messageLevel]}] ${message.message}`);
    });
  }
  
  // ==================== 脚本注入 ====================
  private injectCompatibilityScript(): void {
    const compatibilityScript = `
      // 全屏API兼容性处理
      (function() {
        // 存储原始方法
        const originalRequestFullscreen = Element.prototype.requestFullscreen;
        const originalExitFullscreen = Document.prototype.exitFullscreen;
        
        // 浏览器前缀处理
        const fullscreenAPI = {
          request: function(element) {
            if (element.requestFullscreen) {
              return element.requestFullscreen();
            } else if (element.webkitRequestFullscreen) {
              return element.webkitRequestFullscreen();
            } else if (element.mozRequestFullScreen) {
              return element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
              return element.msRequestFullscreen();
            }
            return Promise.reject(new Error('全屏API不支持'));
          },
          
          exit: function() {
            if (document.exitFullscreen) {
              return document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
              return document.webkitExitFullscreen();
            } else if (document.mozCancelFullScreen) {
              return document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
              return document.msExitFullscreen();
            }
            return Promise.reject(new Error('退出全屏API不支持'));
          },
          
          get fullscreenElement() {
            return document.fullscreenElement ||
                   document.webkitFullscreenElement ||
                   document.mozFullScreenElement ||
                   document.msFullscreenElement;
          },
          
          get fullscreenEnabled() {
            return document.fullscreenEnabled ||
                   document.webkitFullscreenEnabled ||
                   document.mozFullScreenEnabled ||
                   document.msFullscreenEnabled;
          }
        };
        
        // 覆盖标准API
        Element.prototype.requestFullscreen = function() {
          return fullscreenAPI.request(this);
        };
        
        Document.prototype.exitFullscreen = function() {
          return fullscreenAPI.exit();
        };
        
        // 定义只读属性
        Object.defineProperty(document, 'fullscreenElement', {
          get: function() { return fullscreenAPI.fullscreenElement; }
        });
        
        Object.defineProperty(document, 'fullscreenEnabled', {
          get: function() { return fullscreenAPI.fullscreenEnabled; }
        });
        
        console.log('全屏API兼容层已加载');
      })();
    `;
    
    this.safeRunJavaScript(compatibilityScript);
  }
  
  private injectEnhancementScripts(): void {
    const enhancementScript = `
      // iframe全屏权限自动修复
      (function() {
        const FULLSCREEN_ATTRIBUTES = [
          'allowfullscreen',
          'webkitallowfullscreen', 
          'mozallowfullscreen'
        ];
        
        // 修复单个iframe
        function fixSingleIframe(iframe) {
          let fixed = false;
          
          FULLSCREEN_ATTRIBUTES.forEach(attr => {
            if (!iframe.hasAttribute(attr)) {
              iframe.setAttribute(attr, 'true');
              fixed = true;
            }
          });
          
          if (fixed) {
            console.log('修复iframe全屏权限:', iframe.src || '匿名iframe');
          }
          
          return fixed;
        }
        
        // 修复所有iframe
        function fixAllIframes() {
          const iframes = document.querySelectorAll('iframe');
          let fixedCount = 0;
          
          iframes.forEach(iframe => {
            if (fixSingleIframe(iframe)) {
              fixedCount++;
            }
          });
          
          if (fixedCount > 0) {
            console.log(\`共修复\${fixedCount}个iframe的全屏权限\`);
          }
          
          return fixedCount;
        }
        
        // 监听动态添加的iframe
        function setupMutationObserver() {
          const observer = new MutationObserver((mutations) => {
            mutations.forEach(mutation => {
              mutation.addedNodes.forEach(node => {
                if (node.nodeName === 'IFRAME') {
                  fixSingleIframe(node);
                } else if (node.querySelectorAll) {
                  node.querySelectorAll('iframe').forEach(fixSingleIframe);
                }
              });
            });
          });
          
          observer.observe(document.body, {
            childList: true,
            subtree: true
          });
          
          return observer;
        }
        
        // 初始化修复
        const initialFixed = fixAllIframes();
        const observer = setupMutationObserver();
        
        // 暴露API给外部调用
        window.iframeFullscreenFix = {
          fixAll: fixAllIframes,
          dispose: () => observer.disconnect(),
          getFixedCount: () => initialFixed
        };
        
        console.log('iframe全屏修复系统已启动');
      })();
      
      // 视频播放器增强
      (function() {
        // 监听视频元素
        function enhanceVideoPlayers() {
          const videos = document.querySelectorAll('video');
          
          videos.forEach(video => {
            // 确保有controls属性
            if (!video.hasAttribute('controls')) {
              video.setAttribute('controls', '');
            }
            
            // 监听全屏变化
            video.addEventListener('fullscreenchange', function() {
              console.log('视频全屏状态变化:', this.isFullscreen);
            });
            
            // 添加全屏错误处理
            video.addEventListener('fullscreenerror', function(event) {
              console.error('视频全屏错误:', event);
              
              // 尝试修复iframe权限后重试
              if (window.iframeFullscreenFix) {
                window.iframeFullscreenFix.fixAll();
                
                // 延迟后重试
                setTimeout(() => {
                  video.requestFullscreen().catch(e => {
                    console.error('重试全屏失败:', e);
                  });
                }, 100);
              }
            });
          });
          
          console.log(\`增强\${videos.length}个视频播放器\`);
        }
        
        // 延迟执行，确保视频元素已加载
        setTimeout(enhanceVideoPlayers, 500);
      })();
    `;
    
    this.safeRunJavaScript(enhancementScript);
  }
  
  // ==================== 安全执行JavaScript ====================
  private async safeRunJavaScript(script: string): Promise<void> {
    try {
      await this.controller.runJavaScript(script);
      hilog.debug(DOMAIN, TAG, 'JavaScript执行成功');
    } catch (error) {
      const err = error as BusinessError;
      hilog.warn(DOMAIN, TAG, `JavaScript执行失败: ${err.code}`);
    }
  }
  
  // ==================== 资源清理 ====================
  private cleanupWebResources(): void {
    try {
      // 清理脚本
      const cleanupScript = `
        if (window.iframeFullscreenFix) {
          window.iframeFullscreenFix.dispose();
        }
      `;
      
      this.controller.runJavaScript(cleanupScript);
      
      // 停止加载
      this.controller.stop();
      
      hilog.info(DOMAIN, TAG, 'Web资源已清理');
      
    } catch (error) {
      const err = error as BusinessError;
      hilog.error(DOMAIN, TAG, `资源清理失败: ${err.code}`);
    }
  }
  
  // ==================== 页面切换 ====================
  private switchPage(pageKey: string): void {
    if (this.pageConfigs[pageKey]) {
      this.currentPage = pageKey;
      this.pageLoaded = false;
      
      prompt.showToast({ 
        message: `切换到: ${this.pageConfigs[pageKey].title}` 
      });
    }
  }
  
  // ==================== 调试功能 ====================
  private async runDiagnostics(): Promise<void> {
    try {
      const diagScript = `
        (function() {
          const results = {
            timestamp: new Date().toISOString(),
            userAgent: navigator.userAgent,
            fullscreenSupport: {
              standard: !!document.fullscreenEnabled,
              webkit: !!document.webkitFullscreenEnabled,
              moz: !!document.mozFullScreenEnabled,
              ms: !!document.msFullscreenEnabled
            },
            iframes: [],
            videos: []
          };
          
          // 检查iframe
          document.querySelectorAll('iframe').forEach((iframe, index) => {
            results.iframes.push({
              index: index,
              src: iframe.src || '匿名',
              hasAllowFullscreen: iframe.hasAttribute('allowfullscreen'),
              hasWebkitAllowFullscreen: iframe.hasAttribute('webkitallowfullscreen'),
              hasMozAllowFullscreen: iframe.hasAttribute('mozallowfullscreen'),
              sandbox: iframe.getAttribute('sandbox')
            });
          });
          
          // 检查视频
          document.querySelectorAll('video').forEach((video, index) => {
            results.videos.push({
              index: index,
              hasControls: video.hasAttribute('controls'),
              canFullscreen: video.requestFullscreen !== undefined
            });
          });
          
          return results;
        })();
      `;
      
      const diagnostics = await this.controller.runJavaScript(diagScript);
      hilog.info(DOMAIN, TAG, `诊断结果: ${JSON.stringify(diagnostics, null, 2)}`);
      
      this.showDebugInfo = true;
      
    } catch (error) {
      const err = error as BusinessError;
      hilog.error(DOMAIN, TAG, `诊断失败: ${err.code}`);
    }
  }
  
  // ==================== UI构建 ====================
  build() {
    Column() {
      // 标题栏
      Row() {
        Text(this.pageConfigs[this.currentPage].title)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#333333');
          
        Blank();
        
        Button(this.showDebugInfo ? '隐藏调试' : '显示调试')
          .type(ButtonType.Normal)
          .width(100)
          .height(32)
          .backgroundColor(this.showDebugInfo ? '#FF6B6B' : '#4ECDC4')
          .fontColor(Color.White)
          .onClick(() => {
            this.showDebugInfo = !this.showDebugInfo;
          });
      }
      .padding({ left: 20, right: 20, top: 10 })
      .width('100%')
      
      // 页面描述
      Text(this.pageConfigs[this.currentPage].description)
        .fontSize(12)
        .fontColor('#666666')
        .margin({ top: 5, left: 20, right: 20 })
        .width('100%')
      
      // 加载状态
      if (!this.pageLoaded) {
        Column() {
          LoadingProgress()
            .width(40)
            .height(40)
            .color('#4ECDC4');
            
          Text('页面加载中...')
            .fontSize(14)
            .fontColor('#666666')
            .margin({ top: 10 });
        }
        .width('100%')
        .height(200)
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
      }
      
      // Web组件区域
      Web({
        src: this.pageConfigs[this.currentPage].url,
        controller: this.controller
      })
      .domStorageAccess(true)
      .fileAccess(true)
      .geolocationAccess(false)
      .onFullscreenAccess(() => true)
      .width('100%')
      .height(this.showDebugInfo ? '60%' : '70%')
      .backgroundColor('#F8F9FA')
      .visibility(this.pageLoaded ? Visibility.Visible : Visibility.Hidden)
      
      // 调试信息面板
      if (this.showDebugInfo) {
        Column() {
          Text('调试信息')
            .fontSize(16)
            .fontWeight(FontWeight.Medium)
            .fontColor('#333333')
            .margin({ bottom: 10 });
            
          Button('运行诊断')
            .width(120)
            .height(36)
            .backgroundColor('#45B7D1')
            .fontColor(Color.White)
            .margin({ bottom: 10 })
            .onClick(() => this.runDiagnostics());
            
          Text('当前页面: ' + this.pageConfigs[this.currentPage].title)
            .fontSize(12)
            .fontColor('#666666');
            
          Text('加载状态: ' + (this.pageLoaded ? '已完成' : '进行中'))
            .fontSize(12)
            .fontColor('#666666')
            .margin({ top: 5 });
        }
        .padding(15)
        .width('100%')
        .backgroundColor('#F0F0F0')
        .borderRadius(8)
        .margin({ top: 10, left: 20, right: 20 })
      }
      
      // 控制面板
      Column() {
        // 页面切换
        Row({ space: 10 }) {
          Button('视频播放')
            .width(100)
            .height(36)
            .backgroundColor(this.currentPage === 'video' ? '#4ECDC4' : '#E0E0E0')
            .fontColor(this.currentPage === 'video' ? Color.White : '#666666')
            .onClick(() => this.switchPage('video'));
            
          Button('教育平台')
            .width(100)
            .height(36)
            .backgroundColor(this.currentPage === 'education' ? '#4ECDC4' : '#E0E0E0')
            .fontColor(this.currentPage === 'education' ? Color.White : '#666666')
            .onClick(() => this.switchPage('education'));
            
          Button('直播测试')
            .width(100)
            .height(36)
            .backgroundColor(this.currentPage === 'live' ? '#4ECDC4' : '#E0E0E0')
            .fontColor(this.currentPage === 'live' ? Color.White : '#666666')
            .onClick(() => this.switchPage('live'));
        }
        .margin({ bottom: 15 })
        
        // 功能按钮
        Row({ space: 15 }) {
          Button('刷新')
            .width(80)
            .height(36)
            .backgroundColor('#96CEB4')
            .fontColor(Color.White)
            .onClick(() => this.controller.refresh());
            
          Button('后退')
            .width(80)
            .height(36)
            .backgroundColor('#FFEAA7')
            .fontColor('#333333')
            .onClick(() => {
              if (this.controller.accessBackward()) {
                this.controller.backward();
              }
            });
            
          Button('前进')
            .width(80)
            .height(36)
            .backgroundColor('#FFEAA7')
            .fontColor('#333333')
            .onClick(() => {
              if (this.controller.accessForward()) {
                this.controller.forward();
              }
            });
            
          Button('首页')
            .width(80)
            .height(36)
            .backgroundColor('#D8D8D8')
            .fontColor('#333333')
            .onClick(() => this.switchPage('video'));
        }
      }
      .padding(20)
      .width('100%')
      .backgroundColor('#FFFFFF')
      .border({ top: { width: 1, color: '#E0E0E0' } })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}