MAUI中WebView加载新内容后动态调整高度的解决方案

核心思路 #

避开直接手动修改WebView高度引发的样式冲突，通过注入JS监听内容变化+原生端响应回调的方式，让WebView自动适配内容高度，同时完整保留原有样式。

具体实现步骤 #

1. 注入监听内容高度的JS脚本 #

在WebView加载内容（包括API刷新后）完成后，注入一段JS脚本，实时监听页面内容高度变化，一旦高度改变就通知原生端：

// 监听内容高度并回调原生的JS脚本
private const string HeightMonitorScript = @"
(function() {
    function sendHeightToNative() {
        // 根据实际HTML结构选择body或documentElement获取高度
        var height = document.body.scrollHeight || document.documentElement.scrollHeight;
        // 向MAUI原生端发送高度值
        window.chrome.webview.postMessage(height);
    }

    // 初始加载完成后立即发送一次高度
    sendHeightToNative();

    // 监听DOM内容变化，高度改变时自动通知
    var observer = new MutationObserver(sendHeightToNative);
    observer.observe(document.body, {
        attributes: true,
        childList: true,
        subtree: true
    });
})();
";

// 加载HTML内容并注入监听脚本
private async void LoadWebContent(string htmlContent)
{
    webView.Source = new HtmlWebViewSource { Html = htmlContent };
    // 等待WebView加载完成后注入脚本
    await Task.Delay(200); // 适配部分平台加载延迟，可根据实际调整
    await webView.EvaluateJavaScriptAsync(HeightMonitorScript);
}

2. 原生端监听JS回调更新高度 #

在页面初始化时绑定WebView的MessageReceived事件，接收JS传来的高度值，在主线程安全更新WebView高度：

public YourPage()
{
    InitializeComponent();
    // 初始化时启用WebView的JS支持
    webView.WebViewControlInitialized += (s, e) =>
    {
        #if ANDROID
        ((Android.Webkit.WebView)webView.Handler.PlatformView).Settings.JavaScriptEnabled = true;
        #elif IOS
        ((WebKit.WKWebView)webView.Handler.PlatformView).Configuration.UserContentController.AddScriptMessageHandler(new WebViewMessageHandler(this), "UpdateWebViewHeight");
        #endif
    };
    // 监听JS发来的高度消息
    webView.MessageReceived += OnWebViewMessageReceived;
}

private void OnWebViewMessageReceived(object sender, WebViewMessageReceivedEventArgs e)
{
    if (double.TryParse(e.Message, out var newHeight))
    {
        // 必须在主线程更新UI，避免样式错乱
        MainThread.BeginInvokeOnMainThread(() =>
        {
            webView.HeightRequest = newHeight;
            // 强制刷新布局，确保高度生效且样式不变
            webView.ForceLayout();
        });
    }
}

// iOS平台需要实现的脚本消息处理器
public class WebViewMessageHandler : NSObject, IWKScriptMessageHandler
{
    private readonly YourPage _page;
    public WebViewMessageHandler(YourPage page) => _page = page;

    public void DidReceiveScriptMessage(WKUserContentController userContentController, WKScriptMessage message)
    {
        if (double.TryParse(message.Body.ToString(), out var height))
        {
            MainThread.BeginInvokeOnMainThread(() =>
            {
                _page.webView.HeightRequest = height;
                _page.webView.ForceLayout();
            });
        }
    }
}

3. API刷新内容的处理逻辑 #

当通过API获取新内容后，直接调用LoadWebContent加载新HTML即可，无需手动触发Navigated事件：

private async Task RefreshContentFromApi()
{
    var newHtml = await YourApiService.GetUpdatedHtmlContent();
    LoadWebContent(newHtml);
}

关键注意事项 #

• 保留WebView原有布局约束，仅通过HeightRequest调整高度，不要修改VerticalOptions为Fill类属性
• 必须在主线程更新UI，避免跨线程操作引发的样式错乱
• 根据实际HTML结构选择document.body.scrollHeight或document.documentElement.scrollHeight，确保获取正确的内容高度
• 注入脚本的延迟时间可根据不同平台的加载速度调整，避免JS无法找到DOM元素

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