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)