目录

Web加载失败时的白屏页面如何改为自定义错误页

问题场景:

在网络条件较差或链接资源有问题时,Web组件加载失败会出现白屏状态,这种场景下用户无法感知页面加载状态,导致体验较差,需要将白屏替换为自定义错误页面的方案。

解决措施:

应用可以监听页面加载异常的相关事件如onErrorReceive、onHttpErrorReceive和onSslErrorEventReceive等,在对应的回调中按需实现业务逻辑,如使用loadurl加载自定义错误页;本文以onErrorReceive为例对主资源报错的场景进行处理,加载本地错误页面资源文件。

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

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

  build() {
    Stack() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onErrorReceive((event) => {
          // Only handle loading errors of the main framework to avoid duplicate processing of errors in sub-resources
          if (event && event.request.isMainFrame()) {
            try {
              // 加载自定义错误页面
              this.controller.loadUrl($rawfile('custom_failure_page.html'));
            } catch (error) {
              console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
            }
          }
        })
    }
  }
}