Kotlin中WebView自定义ERR_INTERNET_DISCONNECTED错误页方案咨询（Android Studio）

针对关闭WiFi后WebView触发ERR_INTERNET_DISCONNECTED错误时无法显示自定义页面的问题，核心是覆盖WebViewClient的多版本错误回调方法，并正确加载本地离线页面，避免循环触发错误。

步骤1：创建本地离线错误页面 #

在项目的src/main/assets目录下新建error_offline.html，内容示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络断开</title>
    <style>
        body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; font-family: sans-serif; }
        .icon { font-size: 48px; margin-bottom: 16px; }
        .btn { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
    </style>
</head>
<body>
    <div class="icon">🔌</div>
    <h2>网络连接已断开</h2>
    <p>请检查您的网络设置后重试</p>
    <button class="btn" onclick="window.location.reload()">刷新页面</button>
</body>
</html>

步骤2：配置WebView并覆盖错误回调 #

在Activity/Fragment中配置WebView，重写WebViewClient的多个错误处理方法，确保覆盖不同API级别：

WebView webView = findViewById(R.id.web_view);
WebSettings settings = webView.getSettings();

// 开启必要设置
settings.setJavaScriptEnabled(true);
settings.setDomStorageEnabled(true);
settings.setAllowFileAccess(true);

webView.setWebViewClient(new WebViewClient() {
    private String mFailedUrl; // 记录失败的目标URL，用于刷新

    // API 23+ 主框架错误回调
    @Override
    public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
        super.onReceivedError(view, request, error);
        // 仅处理主页面的网络断开错误（错误码-2对应ERR_INTERNET_DISCONNECTED）
        if (error.getErrorCode() == -2 && request.isForMainFrame()) {
            mFailedUrl = request.getUrl().toString();
            loadOfflineErrorPage(view);
        }
    }

    // 兼容API 23以下的错误回调
    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
        super.onReceivedError(view, errorCode, description, failingUrl);
        if (errorCode == -2) {
            mFailedUrl = failingUrl;
            loadOfflineErrorPage(view);
        }
    }

    // 加载本地错误页面，避免循环加载
    private void loadOfflineErrorPage(WebView view) {
        String errorPageUrl = "file:///android_asset/error_offline.html";
        if (!errorPageUrl.equals(view.getUrl())) {
            view.loadUrl(errorPageUrl);
        }
    }

    // 处理错误页面的刷新请求
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        String url = request.getUrl().toString();
        if ("file:///android_asset/error_offline.html".equals(url) && mFailedUrl != null) {
            view.loadUrl(mFailedUrl);
            return true;
        }
        return super.shouldOverrideUrlLoading(view, request);
    }
});

// 初始加载目标网页
webView.loadUrl("https://your-target-domain.com");

关键注意事项 #

• 必须开启JavaScript：错误页面的刷新按钮依赖JS功能，需通过setJavaScriptEnabled(true)开启
• 区分主框架错误：通过request.isForMainFrame()过滤子资源（如图片、CSS）的加载错误，避免频繁触发错误页面
• 避免循环加载：加载错误页面时判断当前URL是否已为错误页面，防止无限循环
• 记录失败URL：用户点击刷新时可直接回到原目标页面，提升体验

内容的提问来源于stack exchange，提问作者djlj