1. 前言导读
在上集中,我们学习了ArkWeb的基础使用, 这集我们来学习如何跟前端js交互
2. 如何调用前端页面函数
应用侧可以通过runJavaScript()
方法调用前端页面的JavaScript相关函数。
runJavaScript(script: string): Promise; 或
runJavaScript(script: string, callback : AsyncCallback): void
异步执行JavaScript脚本,并通过回调方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后,比如
onPageEnd
中调用。
参数:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
script | string | 是 | JavaScript脚本。 |
callback | AsyncCallback | 是 | 回调执行JavaScript脚本结果。JavaScript脚本若执行失败或无返回值时,返回null。 |
- 准备好前端页面index2.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" style="font-size:80px" onclick="callArkTS()">点我试试看</button>
<h1 id="text" style="font-size:50px">这是一个测试信息,默认字体为黑色,调用runJavaScript方法后字体为绿色,调用changeColor方法后字体为红色</h1>
<script>
// 调用有参函数时实现。
var param = "param: JavaScript Hello World!";
function htmlTest(param) {
document.getElementById('text').style.color = 'green';
console.log(param);
}
// 调用无参函数时实现。
function htmlTest() {
document.getElementById('text').style.color = 'green';
}
// 点我试试看!触发前端页面callArkTS()函数执行JavaScript传递的代码块。
function callArkTS() {
changeColor();
}
</script>
</body>
</html>
-
将index2.html放在项目下的
rawfile
文件夹下 -
写一个按钮点击事件,通过
runJavaScript
调用前端js函数
Button('鸿蒙调用Js方法')
.onClick(() => {
// 前端页面函数无参时,将param删除。
this.controller.runJavaScript('htmlTest(param)');
})
- 通过
runJavaScript
也可以传递js代码块片段
Button('鸿蒙调用js, 传递js代码块,修改颜色字体')
.onClick(() => {
// 传递runJavaScript侧代码方法。
this.controller.runJavaScript(`function changeColor(){document.getElementById('text').style.color = 'red'}`);
})
3. 具体代码实现过程
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { router } from '@kit.ArkUI';
@Entry
@Component
struct Index {
controller: webview.WebviewController = new webview.WebviewController();
aboutToAppear() {
// 配置Web开启调试模式
webview.WebviewController.setWebDebuggingAccess(true);
}
build() {
Column({space:30}) {
Button('鸿蒙调用Js方法,修改颜色字体')
.onClick(() => {
// 前端页面函数无参时,将param删除。
this.controller.runJavaScript('htmlTest(param)');
})
Button('鸿蒙调用js, 传递js代码块,修改颜色字体')
.onClick(() => {
// 传递runJavaScript侧代码方法。
this.controller.runJavaScript(`function changeColor(){document.getElementById('text').style.color = 'red'}`);
})
Web({ src: $rawfile('index2.html'), controller: this.controller })
}
.margin(30)
}
}