• 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  class testClass {
20    constructor() {
21    }
22
23    test(): string {
24      return 'ArkTS Hello World!';
25    }
26  }
27
28  @Entry
29  @Component
30  struct WebComponent {
31    webviewController: web_webview.WebviewController = new web_webview.WebviewController();
32    // Declare the object to be registered.
33    @State testObj: testClass = new testClass();
34
35    build() {
36      Column() {
37        // Load the local index.html page.
38        Web({ src: $rawfile('index.html'), controller: this.webviewController})
39          // Inject the object to the web client.
40          .javaScriptProxy({
41            object: this.testObj,
42            name: "testObjName",
43            methodList: ["test"],
44            controller: this.webviewController
45          })
46      }
47    }
48  }
49  ```
50
51
52- Sample code for using [registerJavaScriptProxy()](../reference/apis/js-apis-webview.md#registerjavascriptproxy):
53
54  ```ts
55  // xxx.ets
56  import web_webview from '@ohos.web.webview';
57  import business_error from '@ohos.base';
58
59  class testClass {
60    constructor() {
61    }
62
63    test(): string {
64      return "ArkUI Web Component";
65    }
66
67    toString(): void {
68      console.log('Web Component toString');
69    }
70  }
71
72  @Entry
73  @Component
74  struct Index {
75    webviewController: web_webview.WebviewController = new web_webview.WebviewController();
76    @State testObj: testClass = new testClass();
77
78    build() {
79      Column() {
80        Button('refresh')
81          .onClick(() => {
82            try {
83              this.webviewController.refresh();
84            } catch (error) {
85              let e: business_error.BusinessError = error as business_error.BusinessError;
86              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
87            }
88          })
89        Button('Register JavaScript To Window')
90          .onClick(() => {
91            try {
92              this.webviewController.registerJavaScriptProxy(this.testObj, "objName", ["test", "toString"]);
93            } catch (error) {
94              let e: business_error.BusinessError = error as business_error.BusinessError;
95              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
96            }
97          })
98        Web({ src: $rawfile('index.html'), controller: this.webviewController })
99      }
100    }
101  }
102  ```
103
104  > **NOTE**
105  >
106  > 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.
107
108
109- Sample code for invoking application functions on the **index.html** frontend page:
110
111  ```html
112  <!-- index.html -->
113  <!DOCTYPE html>
114  <html>
115  <body>
116  <button type="button" onclick="callArkTS()">Click Me!</button>
117  <p id="demo"></p>
118  <script>
119      function callArkTS() {
120          let str = objName.test();
121          document.getElementById("demo").innerHTML = str;
122          console.info('ArkTS Hello World! :' + str);
123      }
124  </script>
125  </body>
126  </html>
127  ```
128