根据Web页面是否成功加载动态展示不同页面
=====================

#### 问题现象

需要实现如下功能：

1.  Web正常加载时，页面展示Web页面。
2.  Web异常加载时，展示默认页面（页面包含重新加载按钮）。

#### 背景知识

*   [onErrorReceive](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-basic-components-web-events#onerrorreceive)：网页加载遇到错误时触发该回调。主资源与子资源出错都会回调该接口，可以通过isMainFrame来判断是否是主资源报错。出于性能考虑，建议此回调中尽量执行简单逻辑。在无网络的情况下，触发此回调。
*   [visibility](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-visibility#visibility)：控制组件的显示或隐藏。当未设置visibility时，组件默认为显示。
    *   Hidden：隐藏，但参与布局进行占位。
    *   Visible：显示。
    *   None：隐藏，但不参与布局，不进行占位。

#### 解决方案

[ArkWeb的网络协议栈错误列表](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-neterrorlist)中当ErrorCode为0时表示正常加载，为其他值时表示异常加载。

可以定义一个successLoad变量，当加载失败后把ErrorCode值赋值给successLoad变量，重新刷新页面的时候设置successLoad的值为0（若不设置为0，则默认页面将持续显示），页面使用Stack布局，一层为默认页面，一层为Web页面，当successLoad为0时展示Web页面，successLoad为其他值展示默认页面。

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

@Entry
@Component
struct Index {
  @State successLoad: number = 0;
  webController: webview.WebviewController = new webview.WebviewController();

  build() {
    Stack() {
      Column() {
        Button('重新加载')
          .onClick(() => {
            this.successLoad = 0;
            this.webController.refresh();
          });
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .backgroundColor('#fff1f1f1')
      .visibility(this.successLoad !== 0 ? Visibility.Visible : Visibility.None);

      Web({ controller: this.webController, src: 'www.example.com' }) _// Web页面_
        .width('100%')
        .height('100%')
        .fileAccess(false)
        .geolocationAccess(false)
        .visibility(this.successLoad === 0 ? Visibility.Visible : Visibility.Hidden)
        .onErrorReceive((event) => {
          this.successLoad = event.error.getErrorCode();
        });
    }
    .width('100%')
    .height('100%');
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b0/v3/b6zY2Rh6RXi33gooZfUZMg/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T134148Z&HW-CC-Expire=86400&HW-CC-Sign=74C9FEA1C056C5D296512922C9FE26AF6212999A7C498E6FEA83F90C0AA644EC)

访问在线网页时需添加网络权限：[ohos.permission.INTERNET](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/permissions-for-all#ohospermissioninternet)，具体申请方式请参考[声明权限](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/declare-permissions)。