• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Invoking Application Functions on the Frontend Page
2
3
4You can use the **Web** component to register application code with frontend pages. After the registration is done, frontend pages can use the registered object names to call application functions.
5
6
7Two methods are available for registering the application code:<br>Call [javaScriptProxy()](../reference/arkui-ts/ts-basic-components-web.md#javascriptproxy) during **Web** component initialization.<br> Call [registerJavaScriptProxy()](../reference/apis/js-apis-webview.md#registerjavascriptproxy) after **Web** component initialization.
8
9
10The following example registers the **test()** function with the frontend page. This way, the **test()** function can be triggered and run on the frontend page.
11
12
13- Sample code for using [javaScriptProxy()](../reference/arkui-ts/ts-basic-components-web.md#javascriptproxy):
14
15  ```ts
16  // xxx.ets
17  import web_webview from '@ohos.web.webview';
18
19  @Entry
20  @Component
21  struct WebComponent {
22    webviewController: web_webview.WebviewController = new web_webview.WebviewController();
23    // Declare the object to be registered.
24    testObj = {
25      test: () => {
26        return 'ArkTS Hello World!';
27      }
28    }
29
30    build() {
31      Column() {
32        // Load the local index.html page.
33        Web({ src: $rawfile('index.html'), controller: this.webviewController})
34          // Inject the object to the web client.
35          .javaScriptProxy({
36            object: this.testObj,
37            name: "testObjName",
38            methodList: ["test"],
39            controller: this.webviewController
40          })
41      }
42    }
43  }
44  ```
45
46
47- Sample code for using [registerJavaScriptProxy()](../reference/apis/js-apis-webview.md#registerjavascriptproxy):
48
49  ```ts
50  // xxx.ets
51  import web_webview from '@ohos.web.webview';
52
53  @Entry
54  @Component
55  struct Index {
56    webviewController: web_webview.WebviewController = new web_webview.WebviewController();
57    testObj = {
58      test: (data) => {
59        return "ArkUI Web Component";
60      },
61      toString: () => {
62        console.info('Web Component toString');
63      }
64    }
65
66    build() {
67      Column() {
68        Button('refresh')
69          .onClick(() => {
70            try {
71              this.webviewController.refresh();
72            } catch (error) {
73              console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
74            }
75          })
76        Button('Register JavaScript To Window')
77          .onClick(() => {
78            try {
79              this.webviewController.registerJavaScriptProxy(this.testObj, "objName", ["test", "toString"]);
80            } catch (error) {
81              console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
82            }
83          })
84        Web({ src: $rawfile('index.html'), controller: this.webviewController })
85      }
86    }
87  }
88  ```
89
90  > **NOTE**
91  >
92  > If you use [registerJavaScriptProxy()](../reference/apis/js-apis-webview.md#registerjavascriptproxy) to register a function, call **[refresh()]**(../reference/apis/js-apis-webview.md#refresh) for the function to take effect.
93
94
95- Sample code for invoking application functions on the **index.htm** page:
96
97  ```html
98  <!-- index.html -->
99  <!DOCTYPE html>
100  <html>
101  <body>
102  <button type="button" onclick="callArkTS()">Click Me!</button>
103  <p id="demo"></p>
104  <script>
105      function callArkTS() {
106          let str = testObjName.test();
107          document.getElementById("demo").innerHTML = str;
108          console.info('ArkTS Hello World! :' + str);
109      }
110  </script>
111  </body>
112  </html>
113  ```
114