Android Fragment中WebView加载谷歌树形图时Chrome崩溃求助

嘿，我之前在项目里用WebView加载Google Charts的Treemap时也碰到过类似的Chrome崩溃问题，折腾了好一阵才解决，给你几个实用的排查和解决方向：

1. 确保WebView的核心配置齐全 #

Google Charts完全依赖JavaScript运行，而且部分功能需要DOM存储支持，缺了这些配置很容易导致崩溃：

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

// 必须开启JavaScript，图表核心依赖它运行
settings.setJavaScriptEnabled(true);
// 开启DOM存储，图表需要存储临时渲染数据
settings.setDomStorageEnabled(true);
// 如果你的页面是HTTP协议，而谷歌图表资源是HTTPS，需要允许混合内容加载
settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
// 允许自动加载图片（默认开启，但保险起见确认下）
settings.setLoadsImagesAutomatically(true);

2. 检查加载的HTML内容是否正确 #

很多时候崩溃是因为引入的谷歌图表JS链接错误，或者Treemap的初始化代码有问题。给你一个经过验证的Treemap HTML示例，你可以直接拿来测试：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['treemap']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
          ['Global', null, 0, 0],
          ['America', 'Global', 0, 0],
          ['Europe', 'Global', 0, 0],
          ['Asia', 'Global', 0, 0],
          ['Brazil', 'America', 11, 10],
          ['USA', 'America', 52, 31],
          ['France', 'Europe', 42, -11],
          ['Germany', 'Europe', 31, -2]
        ]);

        var tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 100%;"></div>
  </body>
</html>

加载这个HTML的时候，记得设置正确的BaseURL，不然谷歌的资源可能加载失败：

String htmlContent = "上面的HTML代码字符串";
// 设置BaseURL为谷歌图表的域名，确保资源加载路径正确
webView.loadDataWithBaseURL("https://www.gstatic.com", htmlContent, "text/html", "UTF-8", null);

3. 处理WebView渲染进程崩溃的情况 #

就算配置都对，有时候也会因为内存不足或者系统回收导致渲染进程崩溃，我们可以捕获这个事件，避免系统弹出“Chrome已停止运行”的提示：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onRenderProcessGone(WebView view, RenderProcessGoneDetail detail) {
        super.onRenderProcessGone(view, detail);
        if (detail.didCrash()) {
            // 进程主动崩溃，提示用户重试
            Toast.makeText(getContext(), "图表加载失败，请稍后重试", Toast.LENGTH_SHORT).show();
        } else {
            // 进程被系统回收，尝试重新加载
            Toast.makeText(getContext(), "页面资源被回收，正在重新加载", Toast.LENGTH_SHORT).show();
            view.reload();
        }
    }
});

4. 确认WebView的布局配置合理 #

你用的是ConstraintLayout，要确保WebView的宽高约束正确，避免布局异常导致渲染错误：

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/treemap_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

5. 检查设备WebView版本兼容性 #

旧版本的WebView对新的JavaScript语法支持有限，可能导致崩溃。你可以让用户更新设备上的Android System WebView应用，或者在代码里添加版本判断，对低版本做兼容处理。

按照上面的步骤逐一排查，应该能解决你的Chrome崩溃问题。

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