HarmonyOS鸿蒙Next中tabs中包含webview，如何在外层控制H5页面返回？

HarmonyOS鸿蒙Next中tabs中包含webview，如何在外层控制H5页面返回？ tabs嵌套页面包含webview，拦截tabs首页侧滑事件，判断H5页面是否有历史记录进行返回

3 回复

  1. 对于webview页面，将webview实例封装。

    webController: webview.WebviewController = new webview.WebviewController();
  async aboutToAppear() {
    GlobalContext.getContext().setObject("PageWebController", this.webController)
    console.log("aboutToAppear.run()");
  }

  2. 对于最外层页面，调用webview实例

    onBackPress(): boolean | void {
  let webview = GlobalContext.getContext().getObject("PageWebController") as webview.WebviewController
  if(webview){
    console.log("webview.accessBackward():" + webview.accessBackward())
    if(webview.accessBackward()){
      webview.backward()
      return true;
    } else{
      return false
    }
  }
}

  3. GlobalContext 创建：

    export class GlobalContext {
  private constructor() { }
  private static instance: GlobalContext;
  private _objects = new Map<string, Object>();

  public static getContext(): GlobalContext {
    if (!GlobalContext.instance) {
      GlobalContext.instance = new GlobalContext();
    }
    return GlobalContext.instance;
  }

  getObject(value: string): Object | undefined {
    return this._objects.get(value);
  }

  setObject(key: string, objectClass: Object): void {
    this._objects.set(key, objectClass);
  }
}

更多关于HarmonyOS鸿蒙Next中tabs中包含webview，如何在外层控制H5页面返回？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，若tabs组件包含webview，可以通过WebViewController来控制H5页面的返回行为。具体步骤如下：

  1. 获取WebViewController：在加载H5页面时，通过WebView组件的getWebviewController()方法获取WebViewController实例。

  2. 监听返回事件：在外层组件中监听返回事件，例如通过onBackPress()方法。

  3. 调用返回方法：在返回事件中，通过WebViewController的goBack()方法控制H5页面返回。如果H5页面没有历史记录可返回，则执行外层组件的返回逻辑。

示例代码片段：

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

let webviewController: webview.WebviewController;

// 获取WebViewController
webviewController = webview.getWebviewController();

// 外层返回事件处理
function onBackPress() {
    if (webviewController.canGoBack()) {
        webviewController.goBack();
    } else {
        // 执行外层返回逻辑
    }
}

在HarmonyOS鸿蒙Next中，若需要在Tabs外层控制H5页面的返回操作，可以通过JavaScript与WebView的交互实现。具体步骤如下：

  1. WebView配置：在WebView中注入JavaScript接口，使H5页面能够与原生代码通信。
  2. JavaScript调用：在H5页面中，通过JavaScript调用原生方法，通知应用用户触发了返回操作。
  3. 原生控制：在原生代码中监听JavaScript的调用，当接收到返回通知时，调用WebView的goBack()方法实现返回。

示例代码：

webView.addJavascriptInterface(new WebAppInterface(this), "Android");

public class WebAppInterface {
    Context mContext;
    WebAppInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void onBackPressed() {
        ((MainActivity) mContext).runOnUiThread(() -> webView.goBack());
    }
}

在H5页面中调用：

Android.onBackPressed();

通过这种方式，可以在Tabs外层实现对H5页面返回的控制。

回到顶部