如何在内容缩小时更新自定义 WebView 高度请求

Question

问题出现在Android。

我已经为 WebView 实现了一个自定义渲染器，以获得根据其内容调整高度请求大小的能力。

这是我从 xamarin 论坛上拿来的 post。

[assembly: ExportRenderer(typeof(AutoHeightWebView), typeof(AutoHeightWebViewRenderer))]
namespace MyProject.Droid.Renderers
{
    public class AutoHeightWebViewRenderer : WebViewRenderer
    {

        public AutoHeightWebViewRenderer(Context context): base(context) {}

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement is AutoHeightWebView webViewControl)
            {
                if (e.OldElement == null)
                {
                    Control.SetWebViewClient(new ExtendedWebViewClient(webViewControl));
                }
            }
        }

        class ExtendedWebViewClient : Android.Webkit.WebViewClient
        {
            private readonly AutoHeightWebView _control;

            public ExtendedWebViewClient(AutoHeightWebView control)
            {
                _control = control;
            }

            public override async void OnPageFinished(Android.Webkit.WebView view, string url)
            {
                if (_control != null)
                {
                    int i = 10;
                    while (view.ContentHeight == 0 && i-- > 0) // wait here till content is rendered
                    {
                        await System.Threading.Tasks.Task.Delay(100);
                    }

                    _control.HeightRequest = view.ContentHeight;
                }

                base.OnPageFinished(view, url);
            }
        }
    }
}

基于某种逻辑，我更改了 WebView 的源并使用自定义渲染器调整视图大小。

这在大小增加时有效，但在内容大小小于之前的大小时无效...

更清楚的是，如果我将 WebView 的源设置为 200px 高度的 html 文件并将其更改为 1000px 的 html 文件，它可以工作很好，我可以看到所有内容。但是，如果我尝试返回我的 200px html 文件，我会在下面得到一个 800px 的空白 space，因为内容在 view.ContentHeight 上没有改变并保持 1000px 的值。

我按照这个 issue/thread 并没有找到解决这个问题的方法：https://github.com/xamarin/Xamarin.Forms/issues/1711

我在Android上看到很多话题说我们需要重新创建webview。还有其他解决办法吗？

Answer 1

我找到了一种基于 this thread 的方法。

我首先尝试使用 JS 命令 returns 身高：document.body.scrollHeight。问题是一样的，它总是返回最大尺寸，但从未减小尺寸。

由于JS命令增加尺寸没有问题，我只好将高度设置为0，设置100ms延迟（任意）然后用上面的JS命令得到HTML的高度并设置视图的HeightRequest。

这样一来，HTML体高就不会降低了……总是从0开始，一直增加到HTML体型

最终结果：

public class AutoHeightWebViewRenderer : WebViewRenderer
{
    static AutoHeightWebView _xwebView = null;

    public AutoHeightWebViewRenderer(Android.Content.Context context) : base(context)
    {
    }

    class DynamicSizeWebViewClient : WebViewClient
    {
        public async override void OnPageFinished(Android.Webkit.WebView view, string url)
        {
            try
            {
                if (_xwebView != null)
                {
                    view.Settings.JavaScriptEnabled = true;
                    view.Settings.DomStorageEnabled = true;
                    _xwebView.HeightRequest = 0d;

                    await Task.Delay(100);

                    string result = await _xwebView.EvaluateJavaScriptAsync("(function(){return document.body.scrollHeight;})()");
                    _xwebView.HeightRequest = Convert.ToDouble(result);
                }
                base.OnPageFinished(view, url);
            }
            catch (Exception ex)
            {
                Console.WriteLine($"{ex.Message}");
            }
        }
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
    {
        base.OnElementChanged(e);
        _xwebView = e.NewElement as AutoHeightWebView;

        if (e.OldElement == null)
        {
            Control.SetWebViewClient(new DynamicSizeWebViewClient());
        }
    }
}

如何在内容缩小时更新自定义 WebView 高度请求

How to update custom WebView height request when content is shrunk

android

webview

xamarin.android

xamarin

xamarin.forms