应用侧调用前端页面函数
应用侧可以通过runJavaScript()和runJavaScriptExt()方法调用前端页面的JavaScript相关函数。
runJavaScript()和runJavaScriptExt()在参数类型上有些差异。runJavaScriptExt()入参类型不仅支持string还支持ArrayBuffer（从文件中获取JavaScript脚本数据），另外可以通过AsyncCallback的方式获取执行结果。
在下面的示例中，点击应用侧的“runJavaScript”按钮时，来触发前端页面的htmlTest()方法。
-
前端页面代码。
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<h1 id="text">这是一个测试信息，默认字体为黑色，调用runJavaScript方法后字体为绿色，调用runJavaScriptCodePassed方法后字体为红色</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';}// Click Me！触发前端页面callArkTS()函数执行JavaScript传递的代码。function callArkTS() {changeColor();}
</script>
</body>
</html>应用侧代码。
// xxx.ets
import { webview } from '@kit.ArkWeb';@Entry
@Component
struct WebComponent {webviewController: webview.WebviewController = new webview.WebviewController();aboutToAppear() {// 配置Web开启调试模式webview.WebviewController.setWebDebuggingAccess(true);}build() {Column() {Button('runJavaScript').onClick(() => {// 前端页面函数无参时，将param删除。this.webviewController.runJavaScript('htmlTest(param)');})Button('runJavaScriptCodePassed').onClick(() => {// 传递runJavaScript侧代码方法。this.webviewController.runJavaScript(`function changeColor(){document.getElementById('text').style.color = 'red'}`);})Web({ src: $rawfile('index.html'), controller: this.webviewController })}}
}前端页面调用应用侧函数
开发者使用Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。
注册应用侧代码有两种方式，一种在Web组件初始化调用，使用javaScriptProxy()接口。另外一种在Web组件初始化完成后调用，使用registerJavaScriptProxy()接口。
在下面的示例中，将test()方法注册在前端页面中， 该函数可以在前端页面触发运行。
-
javaScriptProxy()接口使用示例如下。
// xxx.ets
import { webview } from '@kit.ArkWeb';class testClass {constructor() {}test(): string {return 'ArkTS Hello World!';}
}@Entry
@Component
struct WebComponent {webviewController: webview.WebviewController = new webview.WebviewController();// 声明需要注册的对象@State testObj: testClass = new testClass();build() {Column() {// Web组件加载本地index.html页面Web({ src: $rawfile('index.html'), controller: this.webviewController})// 将对象注入到web端.javaScriptProxy({object: this.testObj,name: "testObjName",methodList: ["test"],controller: this.webviewController,// 可选参数asyncMethodList: [],permission: '{"javascriptProxyPermission":{"urlPermissionList":[{"scheme":"resource","host":"rawfile","port":"","path":""},' +'{"scheme":"e","host":"f","port":"g","path":"h"}],"methodList":[{"methodName":"test","urlPermissionList":' +'[{"scheme":"https","host":"xxx.com","port":"","path":""},{"scheme":"resource","host":"rawfile","port":"","path":""}]},' +'{"methodName":"test11","urlPermissionList":[{"scheme":"q","host":"r","port":"","path":"t"},' +'{"scheme":"u","host":"v","port":"","path":""}]}]}}'})}}
}应用侧使用registerJavaScriptProxy()接口注册。
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';class testClass {constructor() {}test(): string {return "ArkUI Web Component";}toString(): void {console.log('Web Component toString');}
}@Entry
@Component
struct Index {webviewController: webview.WebviewController = new webview.WebviewController();@State testObj: testClass = new testClass();build() {Column() {Button('refresh').onClick(() => {try {this.webviewController.refresh();} catch (error) {console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);}})Button('Register JavaScript To Window').onClick(() => {try {this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"],// 可选参数, asyncMethodList[],// 可选参数, permission'{"javascriptProxyPermission":{"urlPermissionList":[{"scheme":"resource","host":"rawfile","port":"","path":""},' +'{"scheme":"e","host":"f","port":"g","path":"h"}],"methodList":[{"methodName":"test","urlPermissionList":' +'[{"scheme":"https","host":"xxx.com","port":"","path":""},{"scheme":"resource","host":"rawfile","port":"","path":""}]},' +'{"methodName":"test11","urlPermissionList":[{"scheme":"q","host":"r","port":"","path":"t"},' +'{"scheme":"u","host":"v","port":"","path":""}]}]}}');} catch (error) {console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);}})Web({ src: $rawfile('index.html'), controller: this.webviewController })}}
}