1e41f4b71Sopenharmony_ci# Invoking Frontend Page Functions on the Application
2e41f4b71Sopenharmony_ci
3e41f4b71Sopenharmony_ci
4e41f4b71Sopenharmony_ciYou can call [runJavaScript()](../reference/apis-arkweb/js-apis-webview.md#runjavascript) on an application to call JavaScript functions of frontend pages.
5e41f4b71Sopenharmony_ci
6e41f4b71Sopenharmony_ci
7e41f4b71Sopenharmony_ciIn the following example, when a user clicks the **runJavaScript** button on the application, the **htmlTest()** API of the frontend page will be triggered.
8e41f4b71Sopenharmony_ci
9e41f4b71Sopenharmony_ci- Frontend page code:
10e41f4b71Sopenharmony_ci  
11e41f4b71Sopenharmony_ci  ```html
12e41f4b71Sopenharmony_ci  <!-- index.html -->
13e41f4b71Sopenharmony_ci  <!DOCTYPE html>
14e41f4b71Sopenharmony_ci  <html>
15e41f4b71Sopenharmony_ci  <body>
16e41f4b71Sopenharmony_ci  <button type="button" onclick="callArkTS()">Click Me!</button>
17e41f4b71Sopenharmony_ci  <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>
18e41f4b71Sopenharmony_ci  <script>
19e41f4b71Sopenharmony_ci      // Implement this function when a parameter is required.
20e41f4b71Sopenharmony_ci      var param = "param: JavaScript Hello World!";
21e41f4b71Sopenharmony_ci      function htmlTest(param) {
22e41f4b71Sopenharmony_ci          document.getElementById('text').style.color = 'green';
23e41f4b71Sopenharmony_ci          console.log(param);
24e41f4b71Sopenharmony_ci      }
25e41f4b71Sopenharmony_ci      // Implement this function when no parameter is required.
26e41f4b71Sopenharmony_ci      function htmlTest() {
27e41f4b71Sopenharmony_ci          document.getElementById('text').style.color = 'green';
28e41f4b71Sopenharmony_ci      }
29e41f4b71Sopenharmony_ci      // The Click Me! button triggers callArkTS() on the frontend page to execute the code passed in by JavaScript.
30e41f4b71Sopenharmony_ci      function callArkTS() {
31e41f4b71Sopenharmony_ci          changeColor();
32e41f4b71Sopenharmony_ci      }
33e41f4b71Sopenharmony_ci  </script>
34e41f4b71Sopenharmony_ci  </body>
35e41f4b71Sopenharmony_ci  </html>
36e41f4b71Sopenharmony_ci  ```
37e41f4b71Sopenharmony_ci
38e41f4b71Sopenharmony_ci
39e41f4b71Sopenharmony_ci- Application code:
40e41f4b71Sopenharmony_ci  
41e41f4b71Sopenharmony_ci  ```ts
42e41f4b71Sopenharmony_ci  // xxx.ets
43e41f4b71Sopenharmony_ci  import { webview } from '@kit.ArkWeb';
44e41f4b71Sopenharmony_ci
45e41f4b71Sopenharmony_ci  @Entry
46e41f4b71Sopenharmony_ci  @Component
47e41f4b71Sopenharmony_ci  struct WebComponent {
48e41f4b71Sopenharmony_ci    webviewController: webview.WebviewController = new webview.WebviewController();
49e41f4b71Sopenharmony_ci
50e41f4b71Sopenharmony_ci    aboutToAppear() {
51e41f4b71Sopenharmony_ci      // Enable web frontend page debugging.
52e41f4b71Sopenharmony_ci      webview.WebviewController.setWebDebuggingAccess(true);
53e41f4b71Sopenharmony_ci    }
54e41f4b71Sopenharmony_ci
55e41f4b71Sopenharmony_ci    build() {
56e41f4b71Sopenharmony_ci      Column() {
57e41f4b71Sopenharmony_ci        Button('runJavaScript')
58e41f4b71Sopenharmony_ci          .onClick(() => {
59e41f4b71Sopenharmony_ci            // If the frontend page function has no parameter, delete param.
60e41f4b71Sopenharmony_ci            this.webviewController.runJavaScript('htmlTest(param)');
61e41f4b71Sopenharmony_ci          })
62e41f4b71Sopenharmony_ci        Button('runJavaScriptCodePassed')
63e41f4b71Sopenharmony_ci          .onClick(() => {
64e41f4b71Sopenharmony_ci            // Pass in code for runJavaScript.
65e41f4b71Sopenharmony_ci            this.webviewController.runJavaScript(`function changeColor(){document.getElementById('text').style.color = 'red'}`);
66e41f4b71Sopenharmony_ci          })
67e41f4b71Sopenharmony_ci        Web({ src: $rawfile('index.html'), controller: this.webviewController })
68e41f4b71Sopenharmony_ci      }
69e41f4b71Sopenharmony_ci    }
70e41f4b71Sopenharmony_ci  }
71e41f4b71Sopenharmony_ci  ```
72e41f4b71Sopenharmony_ci
73e41f4b71Sopenharmony_ci## Samples
74e41f4b71Sopenharmony_ci
75e41f4b71Sopenharmony_ciThe following samples are provided to help you better understand how to develop the **Web** component:
76e41f4b71Sopenharmony_ci
77e41f4b71Sopenharmony_ci- [JS Injection and Execution (ArkTS) (Full SDK) (API9)](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Web/RunJsInWeb)
78