• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Invoking Frontend Page Functions on the Application
2
3You can call [runJavaScript()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#runjavascript) and [runJavaScriptExt()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#runjavascriptext10) from the application side to invoke JavaScript functions of frontend pages.
4
5The parameter types of [runJavaScript()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#runjavascript) and [runJavaScriptExt()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#runjavascriptext10) are different. [runJavaScriptExt()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#runjavascriptext10) supports parameters of the string and array buffer types, while [runJavaScript()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#runjavascript) supports only parameters of the string type.
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 test information. The default font color is black. After the runJavaScript method is called, the font color is yellow. After the runJavaScriptParam method is called, the font color is green. After the runJavaScriptCodePassed method is called, the font color is red.</h1>
18  <script>
19      // Function with parameters.
20      var param = "param: JavaScript Hello World!";
21      function htmlTestParam(param) {
22          document.getElementById('text').style.color = 'green';
23          console.log(param);
24      }
25      // Function without parameters.
26      function htmlTest() {
27          document.getElementById('text').style.color = 'yellow';
28      }
29      // Click the Click Me! button to trigger 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('runJavaScriptParam')
58          .onClick(() => {
59            // Call the function with parameters of the frontend page.
60            this.webviewController.runJavaScript('htmlTestParam(param)');
61          })
62        Button('runJavaScript')
63          .onClick(() => {
64            // Call the function without parameters of the frontend page.
65            this.webviewController.runJavaScript('htmlTest()');
66          })
67        Button('runJavaScriptCodePassed')
68          .onClick(() => {
69            // Pass in code for runJavaScript.
70            this.webviewController.runJavaScript(`function changeColor(){document.getElementById('text').style.color = 'red'}`);
71          })
72        Web({ src: $rawfile('index.html'), controller: this.webviewController })
73      }
74    }
75  }
76  ```
77
78## Samples
79
80The following samples are provided to help you better understand how to develop **Web** component:
81
82- [JS Injection and Execution (ArkTS) (Full SDK) (API9)](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Web/RunJsInWeb)
83