HarmonyOS 鸿蒙Next webview中加载外部H5界面，在界面加载完成http请求前（也可以是渲染前）调用H5的js connectApp方法，方法要在哪里

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

HarmonyOS 鸿蒙Next webview中加载外部H5界面，在界面加载完成http请求前（也可以是渲染前）调用H5的js connectApp方法，方法要在哪里

webview中，加载外部的H5界面，在界面加载完成，http请求前（也可以是渲染前）鸿蒙界面调h5的js的connectApp方法，方法要在哪里。

是onPageShow还是 web().onPageBegin方法，还是aboutToAppear，不过感觉不像aboutToAppear

Harmonyos Next教程
2 回复

界面加载完成时触发，使用web组件的onPageEnd https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#onpageend

onPageEnd执行的时候，H5界面定义的异步方法是已经执行了

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

@Entry

@Component

struct WebLoadComponent {

  controller: webview.WebviewController = new webview.WebviewController();

  aboutToAppear() {

    // 配置Web开启调试模式

    webview.WebviewController.setWebDebuggingAccess(true);

  }

  responseResource: WebResourceResponse = new WebResourceResponse();

  build() {

    Column() {

      // 组件创建时，加载www.example.com

      Web({ src: $rawfile('index.html'), controller: this.controller })

        .onPageEnd(()=>{

          this.controller.runJavaScript(`test().then((value)=>{

document.getElementById('text1').value = value

})`);

        })

    }

  }

}

html

//index.html

<!DOCTYPE html>

  <html>

  <head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">

  </head>

  <body>

  <img style="width: 200px" id="img" src="">

  <input type="text" id="text1" name="text"/>

  </body>

  <script>

  async function test() {

    return new Promise((resolve)=>{

      setTimeout(() => {

        var s=2;

        console.log("testH5:"+s);

        resolve(s);

      }, 1000);

    })

  }

  </script>

  </html>

在HarmonyOS鸿蒙Next的webview中加载外部H5界面，并希望在界面加载完成HTTP请求前（或渲染前）调用H5的connectApp方法，你可以通过以下方式实现：

  1. 监听WebView加载事件：首先，需要监听WebView的加载事件，比如onPageFinished，这个事件会在页面加载完成后被触发。但是，由于你需要在HTTP请求前调用，这个方法可能不完全满足需求。因此，更精确的做法是监听WebView的onReceivedHttpData或类似事件（具体取决于鸿蒙WebView API的支持情况），这通常发生在HTTP数据开始接收时。

  2. 提前注入JS代码：在WebView加载URL之前，通过loadUrl或evaluateJavascript方法注入一段JavaScript代码。这段代码可以是一个立即执行的函数，用于调用connectApp方法。这种方法的好处是，它几乎可以确保在HTTP数据接收或页面渲染之前执行。

  3. 使用WebViewClient：如果鸿蒙WebView支持WebViewClient，可以通过重写shouldInterceptRequest方法来实现类似的功能，但同样需要确认该方法是否能在HTTP请求前执行你的JS代码。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部