Flutter WebView导航失败时如何实现页面自动重载？

算力阿峰

2026-9-29

onWebResourceError 可支撑该需求的验证说明

官方webview_flutter插件提供的onWebResourceError回调会在主页面/子资源加载失败、网络异常、服务端返回4xx/5xx错误等所有资源加载异常场景触发，完全覆盖「无法访问目标URL」的判断需求。

具体实现方案

第一步：绑定回调时增加主页面校验，避免页面内嵌的图片、JS等非核心子资源加载失败误触发重载，仅主框架（isForMainFrame为true）加载失败时执行重载逻辑
第二步：增加防抖与重载次数限制，避免短时间内重复触发重载，同时防止目标URL永久失效时出现无限重载的问题，参考代码如下：

int _reloadCount = 0;
final int _maxReloadTimes = 3;
final WebViewController controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..onWebResourceError = (error) {
    // 仅主页面加载异常且未超过最大重载次数时触发重载
    if (error.isForMainFrame == true && _reloadCount < _maxReloadTimes) {
      _reloadCount++;
      // 间隔2秒后执行重载，避免网络还未恢复就重复请求
      Future.delayed(const Duration(seconds: 2), () {
        controller.reload();
      });
    } else if (_reloadCount >= _maxReloadTimes) {
      // 超过重载次数可自行新增用户提示逻辑
      debugPrint("页面加载失败，请检查网络后重试");
    }
  }
  ..onPageFinished = (url) {
    // 页面加载成功后重置重载次数
    _reloadCount = 0;
  }
  ..loadRequest(Uri.parse("你的目标URL"));