HarmonyOS 鸿蒙Next Web组件怎样监听网页按钮的点击

发布于 1周前 作者 h691938207 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Web组件怎样监听网页按钮的点击

需求:需要在web中点击“回到商户”按钮,然后调用原生路由返回。  安卓与iOS的实现方案,是监听WebView的事件。 iOS的部分核心代码如下: extension MyWebView: WKScriptMessageHandler, WKNavigationDelegate { /// 接受注入js的消息 func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {  let url = message.frameInfo.request.url?.absoluteString // 结果页面,点击按钮 if url!.contains(“pay_result.html”), message.body as! String == “finish-box-button” { showToast(message: “完成”) Router().backToLevel() } } }  

2 回复

可以使用registerJavaScriptProxy 参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#registerjavascriptproxy

示例

// xxx.ets
import { webview } from '@kit.ArkWeb';

class WebObj { constructor() { }

webTest(event: string): void { console.log('H5点击button ’ + event); } }

@Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController() @State webTestObj: WebObj = new WebObj();

build() { Column() { Web({ src: ‘’, controller: this.controller }) .javaScriptAccess(true) .onControllerAttached(() => { this.controller.loadUrl($rawfile(“index.html”)); this.controller.registerJavaScriptProxy(this.webTestObj, “objTestName”, [“webTest”]); this.controller.refresh(); }) .defaultFontSize(90) } } }

<!-- index.html -->
<!DOCTYPE html>
<html>
<meta charset=“utf-8”>
<body>
<button type=“button” onclick=“clickButton()”>Click Me!</button>
</body>
<script type=“text/javascript”>
let num  = 0;
function clickButton() {
num++;
objTestName.webTest(’’ + num)
}
</script>
</html>
 

作为IT专家,对于HarmonyOS 鸿蒙Next中Web组件监听网页按钮点击的问题,有以下专业解答:

在HarmonyOS 鸿蒙Next中,Web组件要监听网页按钮的点击,通常需要通过JavaScript与原生代码进行交互。具体来说,可以在网页的按钮点击事件中触发一个特定的消息,然后通过WebView的接口将该消息传递给原生应用。原生应用接收到消息后,再根据消息内容执行相应的操作。

对于iOS平台,可以使用WKWebView的WKScriptMessageHandler协议来接收JavaScript发送的消息。而对于鸿蒙系统,虽然具体实现可能有所不同,但基本原理相似,即需要通过WebView提供的接口来实现JavaScript与原生代码的通信。

此外,鸿蒙系统还提供了丰富的NDK接口来监听UI组件的事件,包括点击事件。开发者可以使用这些接口来注册事件监听器,并在事件触发时执行相应的回调函数。

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

回到顶部