• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 应用侧调用前端页面函数
2<!--Kit: ArkWeb-->
3<!--Subsystem: Web-->
4<!--Owner: @aohui-->
5<!--Designer: @yaomingliu-->
6<!--Tester: @ghiker-->
7<!--Adviser: @HelloCrease-->
8
9应用侧可以通过[runJavaScript()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#runjavascript)和[runJavaScriptExt()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#runjavascriptext10)方法调用前端页面的JavaScript相关函数。
10
11[runJavaScript()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#runjavascript)和[runJavaScriptExt()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#runjavascriptext10)在参数类型上有以下差异：[runJavaScriptExt()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#runjavascriptext10)支持string和ArrayBuffer类型参数，而[runJavaScript()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#runjavascript)仅支持string类型参数。
12
13在下面的示例中，点击应用侧的“runJavaScript”按钮时，触发前端页面的htmlTest()方法。
14
15- 前端页面代码。
16
17  ```html
18  <!-- index.html -->
19  <!DOCTYPE html>
20  <html>
21  <head>
22      <meta name="viewport" content="width=device-width, initial-scale=1.0">
23  </head>
24  <body>
25  <button type="button" onclick="callArkTS()">Click Me!</button>
26  <h1 id="text">这是一个测试信息，默认字体为黑色，调用runJavaScript方法后字体为黄色、调用runJavaScriptParam方法后字体为绿色、调用runJavaScriptCodePassed方法后字体为红色</h1>
27  <script>
28      // 有参函数。
29      var param = "param: JavaScript Hello World!";
30      function htmlTestParam(param) {
31          document.getElementById('text').style.color = 'green';
32          console.log(param);
33      }
34      // 无参函数。
35      function htmlTest() {
36          document.getElementById('text').style.color = 'yellow';
37      }
38      // 点击“Click Me！”按钮，触发前端页面callArkTS()函数执行JavaScript传递的代码。
39      function callArkTS() {
40          changeColor();
41      }
42  </script>
43  </body>
44  </html>
45  ```
46
47
48- 应用侧代码。
49
50  ```ts
51  // xxx.ets
52  import { webview } from '@kit.ArkWeb';
53
54  @Entry
55  @Component
56  struct WebComponent {
57    webviewController: webview.WebviewController = new webview.WebviewController();
58
59    aboutToAppear() {
60      // 配置Web开启调试模式
61      webview.WebviewController.setWebDebuggingAccess(true);
62    }
63
64    build() {
65      Column() {
66        Button('runJavaScriptParam')
67          .onClick(() => {
68            // 调用前端页面有参函数。
69            this.webviewController.runJavaScript('htmlTestParam(param)');
70          })
71        Button('runJavaScript')
72          .onClick(() => {
73            // 调用前端页面无参函数。
74            this.webviewController.runJavaScript('htmlTest()');
75          })
76        Button('runJavaScriptCodePassed')
77          .onClick(() => {
78            // 传递runJavaScript侧代码方法。
79            this.webviewController.runJavaScript(`function changeColor(){document.getElementById('text').style.color = 'red'}`);
80          })
81        Web({ src: $rawfile('index.html'), controller: this.webviewController })
82      }
83    }
84  }
85  ```
86
87## 相关实例
88
89针对Web组件开发，有以下相关实例可供参考：
90
91- [JS注入与执行（ArkTS）（Full SDK）（API9）](https://gitcode.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Web/RunJsInWeb)