Android Studio中WebView加载Mapbox网页空白问题求助

我之前处理过不少类似的情况——其他网页都能正常加载，唯独某一个页面在WebView里显示空白，大概率是这个页面的特性和你的WebView配置不匹配，或者布局有小细节没处理好。咱们一步步来排查解决：

1. 先调整WebView的布局高度 #

你的WebView设置的是android:layout_height="wrap_content"，如果页面初始加载时内容高度计算异常，很可能导致显示空白。先把高度改成match_parent试试：

<WebView
    android:id="@+id/webview_intro"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</WebView>

2. 开启混合内容支持 #

如果目标页面里引用了HTTPS资源（比如地图API、图片），而你用HTTP链接加载页面，Android 5.0（API 21）及以上默认会阻止混合内容（HTTP页面加载HTTPS资源），直接导致页面渲染失败。在WebSettings里添加这行配置：

// 允许HTTP页面加载HTTPS资源
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    WV.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}

3. 捕获加载错误，精准定位问题 #

默认的WebViewClient不会告诉你加载失败的具体原因，咱们重写onReceivedError和onReceivedHttpError方法，把错误信息打出来：

WV.setWebViewClient(new WebViewClient() {
    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
        super.onReceivedError(view, errorCode, description, failingUrl);
        Toast.makeText(MapWebActivity.this, "加载错误: " + description, Toast.LENGTH_LONG).show();
        Log.e("WebViewError", "错误码: " + errorCode + ", 描述: " + description + ", 失败URL: " + failingUrl);
    }

    @Override
    public void onReceivedHttpError(WebView view, WebResourceRequest request, WebResourceResponse errorResponse) {
        super.onReceivedHttpError(view, request, errorResponse);
        Toast.makeText(MapWebActivity.this, "HTTP错误: " + errorResponse.getStatusCode(), Toast.LENGTH_LONG).show();
        Log.e("WebViewHttpError", "状态码: " + errorResponse.getStatusCode());
    }
});

运行后查看Logcat的错误日志，就能直接知道是资源加载失败、权限问题还是其他原因了。

4. 补充WebView的必要配置 #

有些页面需要特定的浏览器特性才能正常渲染，比如：

• 设置标准User-Agent，避免页面识别为非浏览器设备：

WV.getSettings().setUserAgentString("Mozilla/5.0 (Linux; Android " + Build.VERSION.RELEASE + "; " + Build.MODEL + ") AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.91 Mobile Safari/537.36");

• 开启JavaScript的扩展特性（如果页面用到了弹窗、文件访问等功能）：

WV.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
WV.getSettings().setAllowFileAccess(true);

5. 确认网络权限 #

虽然其他页面能加载，但还是确认下AndroidManifest.xml里有没有添加必要的网络权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

按照上面的步骤逐一排查，应该就能解决这个页面空白的问题了。

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