鸿蒙6.0开发常见问题【如何在webview中使用H5中的alert？】

鸿蒙绿头鱼

414人浏览 · 2025-07-14 14:36:43

鸿蒙绿头鱼 · 2025-07-14 14:36:43 发布

参考代码

使用Web组件的[onAlert]属性可以监测网页触发alert()告警弹窗事件，之后使用[AlertDialog]实现弹窗的效果与逻辑。

import { webview } from '@kit.ArkWeb';


@Entry
@Component
struct WebviewAlert {
  controller: webview.WebviewController = new webview.WebviewController();


  build() {
    Column() {
      Web({ src: $rawfile('WebviewAlert.html'), controller: this.controller })
        .onAlert((event) => {
          if (event) {
            console.log('event.url:' + event.url);
            console.log('event.message:' + event.message);
            this.getUIContext().showAlertDialog({
              title: 'onAlert',
              message: 'text',
              primaryButton: {
                value: 'cancel',
                action: () => {
                  event.result.handleCancel();
                }
              },
              secondaryButton: {
                value: 'ok',
                action: () => {
                  event.result.handleConfirm();
                }
              },
              cancel: () => {
                event.result.handleCancel();
              }
            })
          }
          return true;
        })
    }
  }
}

H5侧：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head>
<body>
<h1>WebView onAlert Demo</h1>
<button onclick="myFunction()">Click here</button>
<script>
    function myFunction() {
      alert("Hello World");
    }
</script>
</body>
</html>