1# Invoking Frontend Page Functions on the Application
2
3You can call [runJavaScript()](../reference/apis-arkweb/js-apis-webview.md#runjavascript) and [runJavaScriptExt()](../reference/apis-arkweb/js-apis-webview.md#runjavascriptext10) on an application to call JavaScript functions of frontend pages.
4
5The parameter types of [runJavaScript()](../reference/apis-arkweb/js-apis-webview.md#runjavascript) and [runJavaScriptExt()](../reference/apis-arkweb/js-apis-webview.md#runjavascriptext10) are different. In [runJavaScriptExt()](../reference/apis-arkweb/js-apis-webview.md#runjavascriptext10), the input parameter type can be **string** or **ArrayBuffer** (JavaScript script data obtained from files), and the execution result can be obtained through **AsyncCallback**.
6
7In the following example, when a user clicks the **runJavaScript** button on the application, the **htmlTest()** API of the frontend page will be triggered.
8
9- Frontend page code:
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">This is a piece of test information. The font color is black by default. It turns green after runJavaScript() is called and red after runJavaScriptCodePassed() is called.</h1>
18  <script>
19      // Implement this function when a parameter is required.
20      var param = "param: JavaScript Hello World!";
21      function htmlTest(param) {
22          document.getElementById('text').style.color = 'green';
23          console.log(param);
24      }
25      // Implement this function when no parameter is required.
26      function htmlTest() {
27          document.getElementById('text').style.color = 'green';
28      }
29      // The Click Me! button triggers callArkTS() on the frontend page to execute the code passed in by JavaScript.
30      function callArkTS() {
31          changeColor();
32      }
33  </script>
34  </body>
35  </html>
36  ```
37
38
39- Application code:
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      // Enable web frontend page debugging.
52      webview.WebviewController.setWebDebuggingAccess(true);
53    }
54
55    build() {
56      Column() {
57        Button('runJavaScript')
58          .onClick(() => {
59            // If no parameter is required for the functions in the frontend page, delete param.
60            this.webviewController.runJavaScript('htmlTest(param)');
61          })
62        Button('runJavaScriptCodePassed')
63          .onClick(() => {
64            // Pass in code for 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## Samples
74
75The following samples are provided to help you better understand how to develop the **Web** component:
76
77- [JS Injection and Execution (ArkTS) (Full SDK) (API9)](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Web/RunJsInWeb)
78