HarmonyOS鸿蒙Next中webview加载本地Html弹窗

HarmonyOS鸿蒙Next中webview加载本地Html弹窗 url: resource://rawfile/assets/VideoPlayer.html?debug=1 native的webview加载rawfiles里的H5，能正常加载，但是弹窗提示 暂无可用打开方式，但是其实已经正常加载了。

web配置如下

Web({ src: this.url, controller: this.webViewController })
  .keyboardAvoidMode(WebKeyboardAvoidMode.RESIZE_VISUAL)
  .darkMode(WebDarkMode.Auto)
  .domStorageAccess(true)
  .zoomAccess(true)
  .fileAccess(true)
  .databaseAccess(false)
  .multiWindowAccess(false)
  .keyboardAvoidMode(WebKeyboardAvoidMode.RESIZE_VISUAL)
  .mixedMode(MixedMode.All)
  .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST })
  .verticalScrollBarAccess(!this.hiddenScrollBar)
  .javaScriptAccess(true)

更多关于HarmonyOS鸿蒙Next中webview加载本地Html弹窗的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

开发者你好，“暂无可用打开方式”这个弹窗应该是您的h5页面去拉起系统上的某个应用失败弹出的弹窗，拉起三方应用，一般是使用Deep Linking或者App Linking这两种方式进行拉起，开发者可以在拉起前使用canOpenLink()接口判断link是否可以打开，您可以参考一下这个链接：Web和应用的跳转与拉起。如果不能解决的您的问题，请提供以下信息：

  1. 问题现象（如：报错日志（获取方式：xxx）、异常截图、问题背景），针对这个问题，方便的话提供一下问题的截图确定下弹窗是否是系统弹窗；

  2. 复现代码（如最小复现demo），请提供下您的html页面是怎么实现的，原生如何去和web交互的；

  3. 版本信息（如：开发工具、手机系统版本信息）；

更多关于HarmonyOS鸿蒙Next中webview加载本地Html弹窗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


估计是HTML中调用了某个地方要打开其它的链接。

有注入jsbridge相关代码用来通信，但是加载在线url是没有弹窗的，onErrorReceive的回调会触发弹窗吗，

在HarmonyOS Next中，WebView加载本地HTML弹窗主要通过Web组件实现。开发者需将HTML文件置于应用的resources/rawfile目录下，使用Web组件的loadUrl方法并指定"rawfile:///"路径来加载本地资源。弹窗交互可通过Web组件与ArkTS间的通信机制处理，例如使用postMessage或注册JavaScriptProxy。

在HarmonyOS Next中，Web组件加载resource://rawfile/协议下的本地HTML文件时，如果页面内触发了特定类型的弹窗（如window.alert、window.confirm、window.prompt或<a target="_blank">链接），系统默认会尝试寻找一个外部的“打开方式”来处理这个动作，从而导致“暂无可用打开方式”的提示。这属于预期行为，因为rawfile资源是应用私有、只读的，系统没有为其注册默认的打开方式。

要解决这个问题，核心思路是拦截Web页面内的弹窗和链接跳转请求，在ArkUI侧用自定义的ArkTS弹窗或逻辑来处理。以下是具体方案：

  1. 拦截JavaScript弹窗：通过Web组件的onAlert、onConfirm、onPrompt等回调来拦截。
  2. 拦截新窗口打开：通过Web组件的onWindowNew回调来拦截，特别是处理target="_blank"的链接。

关键代码示例：

// 1. 拦截并自定义Alert弹窗
Web({ src: this.url, controller: this.webViewController })
  .onAlert((event) => {
    // 阻止默认的弹窗行为
    // 在此处使用ArkTS的弹窗组件（如AlertDialog）来展示event.message
    this.customAlertMessage = event.message;
    this.showCustomAlert = true;
    return { result: false }; // 必须返回{result: false}来阻止默认弹窗
  })
  // 2. 拦截新窗口打开（处理target="_blank"等）
  .onWindowNew((event) => {
    // 阻止在新窗口打开
    // 可以选择在当前Web组件内加载新URL，或用ArkUI页面路由处理
    // this.webViewController.loadUrl(event.targetUrl);
    return { result: false }; // 必须返回{result: false}来阻止
  })
  // 其他配置...

补充说明：

  • onConfirm和onPrompt的处理方式类似，你需要在回调中展示自定义对话框，并通过event.result()将用户的选择结果（布尔值或字符串）回传给Web页面。
  • 确保.javaScriptAccess(true)已开启，否则JavaScript弹窗可能无法正常触发回调。
  • 此弹窗提示的出现，不影响页面本身的加载和渲染，它只是针对页面内触发的特定“打开”动作。因此，你的HTML内容已正常加载，只是需要处理这些交互事件。

通过上述回调拦截，将Web内部的弹窗请求“翻译”成ArkUI的原生交互，即可消除“暂无可用打开方式”的提示，并提供一致的用户体验。

回到顶部