Xamarin.iOS中WebView第10次重载后空白问题求助

这看起来是Xamarin.Forms iOS端WebView的一个资源管理bug，大概率和WKWebView实例重复创建导致的资源泄漏或实例上限有关。我碰到过类似的边缘案例，分享几个亲测有效的解决方案，按推荐优先级排序：

1. 复用HtmlWebViewSource实例（最简单有效） #

你当前每次加载都新建HtmlWebViewSource，这会触发iOS端创建新的WKWebView实例，而系统对这类实例的数量有隐性限制。改为复用同一个Source实例，只更新Html内容，就能避免实例堆积：

步骤： #

• 在页面类中声明全局的HtmlWebViewSource变量：

private HtmlWebViewSource _chartWebSource;

• 在页面初始化时（比如OnAppearing方法）初始化并绑定到WebView：

protected override void OnAppearing()
{
    base.OnAppearing();
    if (_chartWebSource == null)
    {
        _chartWebSource = new HtmlWebViewSource();
        ChartWebView.Source = _chartWebSource;
        // 初始化加载首次内容
        BuildChartHTML();
    }
}

• 修改BuildChartHTML方法，不再新建Source，只更新Html：

private void BuildChartHTML()
{
    var html = GetChartJSConfigString();
    Device.BeginInvokeOnMainThread(() =>
    {
        _chartWebSource.Html = html;
        // 可选：强制触发WebView刷新，确保内容更新
        ChartWebView.Reload();
    });
}

2. 自定义渲染器清理WKWebView缓存并重置 #

如果复用Source还是不行，可以通过自定义渲染器直接操作iOS原生WKWebView，清理缓存或强制重置，解决资源泄漏问题：

iOS项目中添加自定义渲染器： #

using Foundation;
using WebKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(WebView), typeof(CustomWebViewRenderer))]
namespace YourAppName.iOS.Renderers
{
    public class CustomWebViewRenderer : WebViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                // 初始化时清理缓存
                ClearWebViewCache();
            }
        }

        public void ClearWebViewCache()
        {
            var dataTypes = new NSSet<NSString>(
                WKWebsiteDataTypeDiskCache,
                WKWebsiteDataTypeMemoryCache,
                WKWebsiteDataTypeCookies
            );
            WKWebsiteDataStore.DefaultDataStore.RemoveDataOfTypes(dataTypes, NSDate.DistantPast, () => { });
        }

        public void ForceReload()
        {
            ClearWebViewCache();
            Control?.Reload();
        }
    }
}

在共享项目中调用： #

修改BuildChartHTML，每次加载前调用自定义渲染器的清理方法：

private void BuildChartHTML()
{
    var html = GetChartJSConfigString();
    Device.BeginInvokeOnMainThread(() =>
    {
        if (ChartWebView.Source is HtmlWebViewSource source)
        {
            source.Html = html;
        }
        else
        {
            ChartWebView.Source = new HtmlWebViewSource { Html = html };
        }

        // iOS平台强制清理缓存并刷新
        if (Device.RuntimePlatform == Device.iOS)
        {
            var renderer = Platform.GetRenderer(ChartWebView) as CustomWebViewRenderer;
            renderer?.ForceReload();
        }
        else
        {
            ChartWebView.Reload();
        }
    });
}

3. 定期重新创建WebView实例 #

如果以上方案都无效，可以尝试在接近第10次加载时，销毁旧的WebView并创建新实例，绕过实例上限限制：

修改XAML，将WebView放在ContentView容器中： #

<ContentView x:Name="WebViewContainer" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
    <WebView x:Name="ChartWebView" Style="{StaticResource BackgroundStyle}" />
</ContentView>

在页面类中添加计数器和重建逻辑： #

private int _loadCounter = 0;

private void BuildChartHTML()
{
    _loadCounter++;
    var html = GetChartJSConfigString();
    Device.BeginInvokeOnMainThread(() =>
    {
        // 每9次加载后重建WebView，提前触发避免第10次空白
        if (_loadCounter >= 9)
        {
            // 创建新的WebView实例
            var newWebView = new WebView
            {
                Style = (Style)Application.Current.Resources["BackgroundStyle"],
                Source = new HtmlWebViewSource { Html = html }
            };
            // 替换容器中的WebView
            WebViewContainer.Content = newWebView;
            // 更新引用
            ChartWebView = newWebView;
            // 重置计数器
            _loadCounter = 1;
        }
        else
        {
            // 正常更新内容
            if (ChartWebView.Source is HtmlWebViewSource source)
            {
                source.Html = html;
            }
            else
            {
                ChartWebView.Source = new HtmlWebViewSource { Html = html };
            }
            ChartWebView.Reload();
        }
    });
}

额外注意点 #

• 确保GetChartJSConfigString返回的HTML中，Chart.js的代码是内嵌的（而非远程引用），减少WebView的资源请求压力，避免额外的缓存问题。
• 可以在WebView的Navigated事件中打印日志，确认第10次加载时是否真的完成了导航，进一步排除内容加载失败的可能性。

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