#鸿蒙通关秘籍#如何通过应用侧调用前端页面的JavaScript函数?

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
OS风中琴

可以通过 runJavaScript() 方法在应用侧调用前端页面的JavaScript函数。以下是实现步骤:

  1. 在前端页面的HTML代码中定义需要调用的JavaScript函数。

    html <!-- index.html --> <!DOCTYPE html> <html> <body> <button type="button" onclick="callArkTS()">Click Me!</button> <h1 id="text">这是一个测试信息,默认字体为黑色</h1> <script> function htmlTest() { document.getElementById('text').style.color = 'green'; } function callArkTS() { changeColor(); } function changeColor() { document.getElementById('text').style.color = 'red'; } </script> </body> </html>

  2. 在应用侧,通过 webviewController.runJavaScript('htmlTest()') 调用该JavaScript函数。

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

    @Entry @Component struct WebComponent { webviewController: webview.WebviewController = new webview.WebviewController();

    build() { Column() { Button('runJavaScript') .onClick(() => { this.webviewController.runJavaScript('htmlTest()'); }) Button('runJavaScriptCodePassed') .onClick(() => { this.webviewController.runJavaScript(function changeColor(){document.getElementById('text').style.color = 'red'}); }) Web({ src: $rawfile('index.html'), controller: this.webviewController }) } } }

分享
微博
QQ
微信
回复
2天前
相关问题
Native调用ArkTS函数
952浏览 • 1回复 待解决
HarmonyOS 应用访问前端页面方法
0浏览 • 0回复 待解决
TS如何批量传递函数到native
961浏览 • 1回复 待解决