鸿蒙Next原生WebView中如何打开alert弹窗

在鸿蒙Next的原生WebView中，如何实现JavaScript的alert弹窗功能？目前发现在WebView加载网页时，页面中的alert弹窗无法正常弹出，请问需要如何处理或配置才能支持这个功能？是否有相关的接口或回调需要实现？

2 回复

鸿蒙Next的WebView里，alert弹窗默认被拦截了。想让它弹出来？得先给WebChromeClient配个onJsAlert方法，在里面用HiView或Dialog自定义弹窗。简单说：别指望浏览器自动弹，得自己动手造！

更多关于鸿蒙Next原生WebView中如何打开alert弹窗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，原生WebView组件使用 WebComponent 实现。要处理JavaScript的 alert 弹窗，需要通过 WebController 设置弹窗处理器来捕获并自定义显示。

步骤与代码示例：

  1. 创建WebView并设置控制器：

    import webView from '[@ohos](/user/ohos).web.webView';
import { webview } from '[@kit](/user/kit).ArkWeb';

[@Entry](/user/Entry)
[@Component](/user/Component)
struct WebComponentExample {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      // 创建WebView组件
      Web({ src: 'https://example.com', controller: this.controller })
        .onAlert((event) => {
          // 处理alert弹窗
          prompt.showDialog({
            message: event.message,
            buttons: [{ text: '确认', color: '#0000FF' }]
          });
          return true; // 阻止默认弹窗
        })
    }
  }
}

  2. 关键点说明：

    • 使用 Web 组件加载网页，并通过 controller 属性关联控制器。
    • 通过 onAlert 事件监听JavaScript的 alert 调用，参数 event 包含弹窗消息（event.message）。
    • 在回调中使用鸿蒙的 prompt.showDialog 或其他UI组件（如自定义弹窗）替换默认行为。
    • 返回 true 表示已处理弹窗，阻止WebView默认显示。

  3. 注意事项：

    • 确保导入 [@kit](/user/kit).ArkWeb 和 [@ohos](/user/ohos).web.webView 模块。
    • 若需支持其他弹窗类型（如 confirm、prompt），可类似使用 onConfirm 或 onBeforeUnload 事件。

通过以上方法，即可在鸿蒙Next的WebView中自定义处理JavaScript的alert弹窗，提升用户体验一致性。

回到顶部