• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 应用侧调用前端页面函数
2
3
4应用侧可以通过[runJavaScript()](../reference/apis/js-apis-webview.md#runjavascript)方法调用前端页面的JavaScript相关函数。
5
6
7在下面的示例中，点击应用侧的“runJavaScript”按钮时，来触发前端页面的htmlTest()方法。
8
9
10- 前端页面代码。
11
12  ```html
13  <!-- index.html -->
14  <!DOCTYPE html>
15  <html>
16  <body>
17  <script>
18      function htmlTest() {
19          console.info('JavaScript Hello World! ');
20      }
21  </script>
22  </body>
23  </html>
24  ```
25
26
27- 应用侧代码。
28
29  ```ts
30  // xxx.ets
31  import web_webview from '@ohos.web.webview';
32
33  @Entry
34  @Component
35  struct WebComponent {
36    webviewController: web_webview.WebviewController = new web_webview.WebviewController();
37
38    build() {
39      Column() {
40        Button('runJavaScript')
41          .onClick(() => {
42             this.webviewController.runJavaScript('htmlTest()');
43          })
44        Web({ src: $rawfile('index.html'), controller: this.webviewController})
45      }
46    }
47  }
48  ```
49
50## 相关实例
51
52针对Web组件开发，有以下相关实例可供参考：
53
54- [JS注入与执行（ArkTS）（Full SDK）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-4.0-Release/code/BasicFeature/Web/RunJsInWeb)