.NET MAUI iOS自定义WebView高度无法随HTML内容动态调整求助

常见问题排查点 #

• 页面未完全加载时就执行获取高度的JS脚本，导致拿到的高度不准确
• 仅监听DidFinishNavigation事件，未处理页面内动态加载的内容（比如AJAX渲染部分）
• 更新HeightRequest后未触发MAUI布局的强制刷新
• HTML内容本身带有固定高度、overflow:hidden这类样式，导致计算高度偏差

改进后的自定义WKWebView渲染器实现 #

using Microsoft.Maui.Handlers;
using WebKit;
using Foundation;

namespace YourAppName.Platforms.iOS;

public class AutoHeightWebViewHandler : WebViewHandler
{
    protected override void ConnectHandler(WKWebView platformView)
    {
        base.ConnectHandler(platformView);
        
        // 绑定导航代理监听页面加载
        platformView.NavigationDelegate = new AutoHeightNavigationDelegate(this);
        
        // 注入DOM变化监听脚本，覆盖动态内容更新场景
        var domObserverScript = @"
            const observer = new MutationObserver(() => {
                window.webkit.messageHandlers.heightSync.postMessage(document.body.scrollHeight);
            });
            observer.observe(document.body, { attributes: true, childList: true, subtree: true });
        ";
        platformView.EvaluateJavaScript(domObserverScript, null);
    }

    private class AutoHeightNavigationDelegate : WKNavigationDelegate
    {
        private readonly AutoHeightWebViewHandler _handler;

        public AutoHeightNavigationDelegate(AutoHeightWebViewHandler handler)
        {
            _handler = handler;
        }

        public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
        {
            // 页面首次加载完成后获取初始高度
            webView.EvaluateJavaScript("document.body.scrollHeight", (result, error) =>
            {
                if (error == null && result is NSNumber height)
                {
                    UpdateWebViewHeight(height.DoubleValue);
                }
            });
        }

        private void UpdateWebViewHeight(double height)
        {
            // 主线程更新UI，避免跨线程问题
            NSOperationQueue.MainQueue.AddOperation(() =>
            {
                if (_handler.VirtualView != null)
                {
                    // 增加10px冗余高度，避免内容被截断
                    _handler.VirtualView.HeightRequest = height + 10;
                    // 强制触发布局刷新
                    _handler.VirtualView.ForceLayout();
                }
            });
        }
    }
}

MAUI 端配置与布局注意事项 #

1. 在MauiProgram.cs中注册自定义渲染器：

builder.ConfigureMauiHandlers(handlers =>
{
#if IOS
    handlers.AddHandler<WebView, AutoHeightWebViewHandler>();
#endif
});

2. XAML布局中不要给WebView设置固定高度，放在自适应容器中：

<VerticalStackLayout Padding="10">
    <!-- 其他控件 -->
    <WebView x:Name="DynamicContentWebView"
             HorizontalOptions="Fill"
             VerticalOptions="Start" />
</VerticalStackLayout>

HTML内容优化建议 #

确保动态HTML没有限制高度的样式，在HTML头部添加重置样式：

<head>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: auto !important;
            overflow: visible !important;
        }
        /* 避免图片未加载导致高度计算偏差 */
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>

动态内容更新补充说明 #

如果HTML内容通过AJAX动态加载，上面的MutationObserver会自动监听DOM变化并同步高度；如果手动更新WebView的Source，确保新内容加载后重新注入监听脚本即可。

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