HarmonyOS 鸿蒙Next ArkWeb组件加载网页,无法回调JS函数

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

HarmonyOS 鸿蒙Next ArkWeb组件加载网页,无法回调JS函数 使用ArkWeb加载人机验证网页,第一次进入可以触发回调,后续重新进入,无法触发

2 回复

我这边试了一下发现是正常能触发的,你这边再确认一下

//index.html 文件
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <style>
        button {
            width:300px;
            height:100px;
            background-color: #008CBA;
            padding: 15px 30px;
            text-align: center;
            text-decoration: none;
            font-size: 20px;
            color: white;
        }
        div {
            padding: 15px 30px;
            text-align: center;
            width:100%;
        }
    </style>
</head>
<body>
<div>
    <button type="button" onclick="start()">测试</button>
</div>

<p id="demo"></p>
<script>
    function start() {
        HarmonyOS_native.captchaResult('');
        console.info('start ok:');
    }
</script>
</body>
</html>
------------------------------------------------------
//webPage.ets 文件
import { router } from '@kit.ArkUI'
import webview from '@ohos.web.webview';
import { WebDataClass, WebJSBridgeClass, webJSBridgeMethods } from './WebJSBridgeManager';

@Entry
@Component
struct WebPage {
  controller: webview.WebviewController = new webview.WebviewController();
  title: string = (router.getParams() as Record<string, string>)['title']
  url: string = (router.getParams() as Record<string, string>)['url']
  @State webDataObject: WebDataClass = new WebDataClass('', false)
  @State webJSBridgeClass: WebJSBridgeClass = new WebJSBridgeClass(this.controller, this.webDataObject);
  @State mode: MixedMode = MixedMode.All;




  build() {
    Column() {
      Text(this.title)
        .width('100%')
        .height(50)
        .textAlign(TextAlign.Center)

      Web({ src: $rawfile("index.html"), controller: this.controller })
        .domStorageAccess(true)
        .mixedMode(this.mode)
        .cacheMode(CacheMode.Online)
        .onProgressChange((event) => {
          if (event) {
          }
        })
        .onTitleReceive((event) => {
          if (event) {
            this.webDataObject.title = event.title
          }
        })
        .onRenderExited((event) => {
          if (event) {
            console.error('reason:' + event.renderExitReason)
          }
        })
        .javaScriptProxy({
          object: this.webJSBridgeClass,
          name: "HarmonyOS_native",
          methodList: webJSBridgeMethods,
          controller: this.controller
        })
        .layoutWeight(1)
        .width('100%')
    }
  }

  aboutToAppear(): void {
    console.error('url = '+ this.url)
    webview.once('webInited', () => {
      let ua = this.controller.getUserAgent() + 'mxsa_mxbc';
      this.controller.setCustomUserAgent(ua);
    })
  }
}

------------------------------------------------------
//WebJSBridgeManager.ets 文件

import web_webview from '@ohos.web.webview';
import pasteboard from '@ohos.pasteboard';
import { router } from '@kit.ArkUI';
import { emitter } from '@kit.BasicServicesKit';
import { HashMap } from '@kit.ArkTS';

interface JsResponse {
  code: number;
  msg: String;
  data: object | undefined
}

export class captchaVerifyParam {
  code: string = ''
}

export class BaseEventData implements emitter.EventData {
  data: captchaVerifyParam = new captchaVerifyParam()
}


/*
由于struct和class不同,不建议把this作为参数传递到struct外部使用,避免引起实例引用无法释放的情况,导致内存泄露。
建议将状态变量对象传递到struct外面使用,通过修改对象的属性,来触发UI刷新。
 * */
class WebDataClass {
  title: string = ''
  isHideTitleBar: boolean = false

  constructor(title: string, isHideTitleBar: boolean) {
    this.title = title
    this.isHideTitleBar = isHideTitleBar
  }
}

interface GeneratedObjectLiteralInterface_1 {
  code: number;
  msg: string;
}

class WebJSBridgeClass {
  private webviewController: web_webview.WebviewController;
  private webDataObject?: WebDataClass;

  constructor(webviewController: web_webview.WebviewController,
    webDataObject: WebDataClass) {
    this.webviewController = webviewController;
    this.webDataObject = webDataObject;
  }




  captchaResult(data: string) {
    router.back()
  }

  //执行JS函数
  private evaluateJavaScript(params: string) {
    this.webviewController.runJavaScript(`HarmonyOSCallBack(${params})`);
  }
}

let webJSBridgeMethods: Array<string> = [
  'captchaResult'
]

export {
  WebJSBridgeClass, webJSBridgeMethods, WebDataClass
}

更多关于HarmonyOS 鸿蒙Next ArkWeb组件加载网页,无法回调JS函数的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对“HarmonyOS 鸿蒙Next ArkWeb组件加载网页,无法回调JS函数”的问题,可能的原因及解决方案如下:

在鸿蒙系统中,ArkWeb组件用于加载和渲染网页内容。若遇到无法回调JS函数的情况,首先需确认以下几点:

  1. JS接口暴露:确保在网页的JS代码中,需要被调用的函数是全局可访问的,或者已经通过适当的方式暴露给了ArkWeb组件。

  2. 调用权限:检查ArkWeb组件是否有足够的权限去调用网页中的JS函数。在某些安全策略下,可能需要特定的权限设置。

  3. 调用方式:验证ArkWeb组件调用JS函数的方式是否正确。鸿蒙系统可能提供了特定的API或方法来调用JS,需按照官方文档正确使用。

  4. 错误处理:检查是否有任何错误被抛出,这些错误可能阻止JS函数的回调。查看日志或使用调试工具可以帮助定位问题。

  5. 版本兼容性:确保鸿蒙系统版本与ArkWeb组件的版本兼容,有时版本更新可能引入或修复与JS交互相关的问题。

如果以上步骤均无法解决问题,可能是由于鸿蒙系统或ArkWeb组件的特定bug导致。此时,建议联系鸿蒙系统的官方客服以获取进一步的支持。

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

回到顶部