harmony 鸿蒙应用侧调用前端页面函数

2023-06-24
浏览 (729)

应用侧调用前端页面函数

应用侧可以通过runJavaScript()方法调用前端页面的JavaScript相关函数。

在下面的示例中，点击应用侧的“runJavaScript”按钮时，来触发前端页面的htmlTest()方法。

前端页面代码。

  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <body>
  <script>
      function htmlTest() {
          console.info('JavaScript Hello World! ');
      }
  </script>
  </body>
  </html>

应用侧代码。

  // xxx.ets
  import web_webview from '@ohos.web.webview';
  
  @Entry
  @Component
  struct WebComponent {
    webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  
    build() {
      Column() {
        Web({ src: $rawfile('index.html'), controller: this.webviewController})
        Button('runJavaScript')
          .onClick(() => {
             this.webviewController.runJavaScript('htmlTest()');
          })
      }
    }
  }