HarmonyOS鸿蒙Next中点击H5页面将其全屏显示

HarmonyOS鸿蒙Next中点击H5页面将其全屏显示 在一个整个页面中，被分成了两侧展示，左侧展示的是正常鸿蒙应用侧页面，右侧展示的是web嵌套的H5页面。

现需实现以下效果：在点击H5页面中的按钮后，控制整个H5页面占据全屏显示，左侧的应用侧页面直接隐藏消失不见。

请问以上效果该怎么实现？

3 回复

左边页面可以通过visibility属性实现对页面的显示与隐藏，具体可以参考文档 https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-visibility#visibility ，其中控制该属性的显示与隐藏可以通过H5与应用侧建立通信来实现，参考文档 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-app-page-data-channel

更多关于HarmonyOS鸿蒙Next中点击H5页面将其全屏显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，可通过Web组件加载H5页面，并调用enterFullScreen()方法实现全屏显示。首先，在Web组件中监听页面加载完成事件，然后触发全屏操作。具体实现时，需在onPageEnd回调中调用webController.enterFullScreen()。此方法仅适用于应用内Web组件，系统级全屏需结合窗口管理接口。注意权限与API版本兼容性。

在HarmonyOS Next中实现H5页面全屏显示并隐藏左侧应用侧页面，可以通过以下方式实现：

1. 使用ArkTS控制布局切换

在鸿蒙应用侧，通过状态变量控制页面布局。点击H5页面按钮时，通过Web组件的事件回调通知ArkTS侧，切换布局状态。

示例代码：

// 应用侧ArkTS代码
@Entry
@Component
struct Index {
  @State isFullScreen: boolean = false; // 控制是否全屏

  build() {
    Column() {
      if (!this.isFullScreen) {
        // 左侧应用侧页面
        Column() {
          Text('左侧应用页面')
            .fontSize(20)
        }
        .width('30%')
        .backgroundColor(Color.Orange)
      }

      // Web组件加载H5页面
      Web({
        src: 'https://example.com/h5-page',
        controller: this.webController
      })
      .onPageEnd(() => {
        // 注入JavaScript代码，绑定按钮点击事件
        this.webController.runJavaScript(`
          document.getElementById('fullscreen-btn').onclick = function() {
            window.harmony.postMessage('enterFullScreen');
          };
        `);
      })
      .onMessage((event) => {
        if (event.message === 'enterFullScreen') {
          this.isFullScreen = true; // 切换为全屏状态
        }
      })
      .width(this.isFullScreen ? '100%' : '70%')
    }
    .width('100%')
    .height('100%')
  }
}

2. H5页面通过postMessage通信

在H5页面中，通过window.harmony.postMessage方法向鸿蒙应用侧发送消息，触发布局切换。

H5页面示例：

<button id="fullscreen-btn">点击全屏显示</button>

<script>
  // 通过全局对象 harmony 与鸿蒙应用通信
  document.getElementById('fullscreen-btn').addEventListener('click', function() {
    if (window.harmony && typeof window.harmony.postMessage === 'function') {
      window.harmony.postMessage('enterFullScreen');
    }
  });
</script>

3. 使用全屏API（可选）

如果需要在H5页面内部实现全屏效果（如全屏播放视频），可以结合Web全屏API：

// H5页面内部全屏
function requestFullScreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  }
}

注意事项：

  • 通信机制：确保H5页面中window.harmony.postMessage可用，这是Web组件默认提供的通信对象。
  • 布局控制：全屏切换本质是通过ArkTS状态变量控制Web组件宽度从70%变为100%，同时隐藏左侧组件。
  • 事件绑定：需要在Web页面加载完成后注入JavaScript代码绑定事件，或由H5页面主动调用通信接口。

这种方式通过ArkTS与Web组件的交互，实现了点击H5按钮控制鸿蒙应用布局切换的效果。

回到顶部