HarmonyOS鸿蒙Next中web组件打开h5，在h5内进入下一个子页面，系统返回键（左滑）不能回到上个页面，只能返回上个page，有api解决么？

HarmonyOS鸿蒙Next中web组件打开h5，在h5内进入下一个子页面，系统返回键（左滑）不能回到上个页面，只能返回上个page，有api解决么？ web组件打开h5，在h5内进入下一个子页面，系统返回键（左滑）不能回到上个页面，只能返回上个page，有api解决么

4 回复

https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkweb-43-V5

通过重写onBackPress函数来自定义返回逻辑，使用WebviewController判断是否返回上一个Web页面。

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

@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: 'http://www.example.com', controller: this.controller }) //需要手动替换为真实网站
    }
  }

  onBackPress() {
    // 当前页面是否可前进或者后退给定的step步(-1),正数代表前进，负数代表后退 
    if (this.controller.accessStep(-1)) {
      this.controller.backward(); // 返回上一个web页 
      // 执行用户自定义返回逻辑 
      return true;
    } else {
      // 执行系统默认返回逻辑，返回上一个page页 
      return false;
    }
  }
}

更多关于HarmonyOS鸿蒙Next中web组件打开h5，在h5内进入下一个子页面，系统返回键（左滑）不能回到上个页面，只能返回上个page，有api解决么？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


蹲一下

在HarmonyOS鸿蒙Next中，使用Web组件加载H5页面时，如果遇到系统返回键（左滑）无法返回到H5子页面，而是直接返回到上一个Page的情况，可以通过以下方式解决：

  1. 监听Web组件的页面导航事件：通过onPageStart和onPageFinish等回调方法，可以监听H5页面的导航变化。当检测到H5页面发生跳转时，可以在鸿蒙端记录页面的导航栈。

  2. 自定义返回逻辑：在系统返回键触发时，通过onBackPress方法拦截默认的返回行为，并判断当前H5页面的导航栈状态。如果H5页面存在子页面，则调用Web组件的backward方法返回到上一个H5页面，而不是直接返回到上一个Page。

  3. 使用Web组件的backward方法：backward方法可以控制Web组件内部的页面导航，使其返回到上一个H5页面。在自定义返回逻辑中调用此方法，可以实现系统返回键返回到H5子页面的需求。

  4. 页面导航栈管理：在鸿蒙端维护一个与H5页面导航栈同步的栈结构，用于记录H5页面的跳转状态。在系统返回键触发时，根据栈的状态决定是调用backward方法还是执行默认的返回行为。

以下是示例代码片段：

import webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponentExample {
  @State webController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: 'https://your-h5-page-url.com', controller: this.webController })
        .onPageStart((event) => {
          // 记录页面导航栈
          console.log('Page started:', event.url);
        })
        .onPageFinish((event) => {
          // 更新页面导航栈
          console.log('Page finished:', event.url);
        })
        .onBackPress(() => {
          // 自定义返回逻辑
          if (this.webController.canGoBack()) {
            this.webController.backward();
            return true; // 拦截默认返回行为
          }
          return false; // 执行默认返回行为
        })
    }
  }
}

通过上述方法，可以在HarmonyOS鸿蒙Next中实现系统返回键返回到H5子页面的功能。

在HarmonyOS鸿蒙Next中，Web组件默认不支持H5页面内的返回操作。你可以通过监听系统返回键事件，使用Web组件的backward()方法来实现页面内返回。具体代码如下：

webView.setOnKeyListener((keyEvent) => {
    if (keyEvent.getKeyCode() == KeyEvent.KEYCODE_BACK) {
        if (webView.canGoBack()) {
            webView.backward();
            return true; // 拦截返回键
        }
    }
    return false;
});

这样可以确保在H5页面内返回上一个子页面，而不是直接返回到上一个Page。

回到顶部