1# 应用侧调用前端页面函数 2 3应用侧可以通过[runJavaScript()](../reference/apis-arkweb/js-apis-webview.md#runjavascript)和[runJavaScriptExt()](../reference/apis-arkweb/js-apis-webview.md#runjavascriptext10)方法调用前端页面的JavaScript相关函数。 4 5[runJavaScript()](../reference/apis-arkweb/js-apis-webview.md#runjavascript)和[runJavaScriptExt()](../reference/apis-arkweb/js-apis-webview.md#runjavascriptext10)在参数类型上有些差异。[runJavaScriptExt()](../reference/apis-arkweb/js-apis-webview.md#runjavascriptext10)入参类型不仅支持string还支持ArrayBuffer(从文件中获取JavaScript脚本数据),另外可以通过AsyncCallback的方式获取执行结果。 6 7在下面的示例中,点击应用侧的“runJavaScript”按钮时,来触发前端页面的htmlTest()方法。 8 9- 前端页面代码。 10 11 ```html 12 <!-- index.html --> 13 <!DOCTYPE html> 14 <html> 15 <body> 16 <button type="button" onclick="callArkTS()">Click Me!</button> 17 <h1 id="text">这是一个测试信息,默认字体为黑色,调用runJavaScript方法后字体为绿色,调用runJavaScriptCodePassed方法后字体为红色</h1> 18 <script> 19 // 调用有参函数时实现。 20 var param = "param: JavaScript Hello World!"; 21 function htmlTest(param) { 22 document.getElementById('text').style.color = 'green'; 23 console.log(param); 24 } 25 // 调用无参函数时实现。 26 function htmlTest() { 27 document.getElementById('text').style.color = 'green'; 28 } 29 // Click Me!触发前端页面callArkTS()函数执行JavaScript传递的代码。 30 function callArkTS() { 31 changeColor(); 32 } 33 </script> 34 </body> 35 </html> 36 ``` 37 38 39- 应用侧代码。 40 41 ```ts 42 // xxx.ets 43 import { webview } from '@kit.ArkWeb'; 44 45 @Entry 46 @Component 47 struct WebComponent { 48 webviewController: webview.WebviewController = new webview.WebviewController(); 49 50 aboutToAppear() { 51 // 配置Web开启调试模式 52 webview.WebviewController.setWebDebuggingAccess(true); 53 } 54 55 build() { 56 Column() { 57 Button('runJavaScript') 58 .onClick(() => { 59 // 前端页面函数无参时,将param删除。 60 this.webviewController.runJavaScript('htmlTest(param)'); 61 }) 62 Button('runJavaScriptCodePassed') 63 .onClick(() => { 64 // 传递runJavaScript侧代码方法。 65 this.webviewController.runJavaScript(`function changeColor(){document.getElementById('text').style.color = 'red'}`); 66 }) 67 Web({ src: $rawfile('index.html'), controller: this.webviewController }) 68 } 69 } 70 } 71 ``` 72 73## 相关实例 74 75针对Web组件开发,有以下相关实例可供参考: 76 77- [JS注入与执行(ArkTS)(Full SDK)(API9)](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Web/RunJsInWeb)