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

2023-06-24
浏览 (1170)

应用侧调用前端页面函数

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

runJavaScript()和runJavaScriptExt()在参数类型上有以下差异：runJavaScriptExt()支持string和ArrayBuffer类型参数，而runJavaScript()仅支持string类型参数。

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

前端页面代码。

  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <body>
  <button type="button" onclick="callArkTS()">Click Me!</button>
  <h1 id="text">这是一个测试信息，默认字体为黑色，调用runJavaScript方法后字体为黄色、调用runJavaScriptParam方法后字体为绿色、调用runJavaScriptCodePassed方法后字体为红色</h1>
  <script>
      // 有参函数。
      var param = "param: JavaScript Hello World!";
      function htmlTestParam(param) {
          document.getElementById('text').style.color = 'green';
          console.log(param);
      }
      // 无参函数。
      function htmlTest() {
          document.getElementById('text').style.color = 'yellow';
      }
      // 点击“Click Me！”按钮，触发前端页面callArkTS()函数执行JavaScript传递的代码。
      function callArkTS() {
          changeColor();
      }
  </script>
  </body>
  </html>

应用侧代码。

  // xxx.ets
  import { webview } from '@kit.ArkWeb';

  @Entry
  @Component
  struct WebComponent {
    webviewController: webview.WebviewController = new webview.WebviewController();

    aboutToAppear() {
      // 配置Web开启调试模式
      webview.WebviewController.setWebDebuggingAccess(true);
    }

    build() {
      Column() {
        Button('runJavaScriptParam')
          .onClick(() => {
            // 调用前端页面有参函数。
            this.webviewController.runJavaScript('htmlTestParam(param)');
          })
        Button('runJavaScript')
          .onClick(() => {
            // 调用前端页面无参函数。
            this.webviewController.runJavaScript('htmlTest()');
          })
        Button('runJavaScriptCodePassed')
          .onClick(() => {
            // 传递runJavaScript侧代码方法。
            this.webviewController.runJavaScript(`function changeColor(){document.getElementById('text').style.color = 'red'}`);
          })
        Web({ src: $rawfile('index.html'), controller: this.webviewController })
      }
    }
  }