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