WinUI3:获取WebView2 HTML高度

qnakjoqk  于 2022-11-27  发布在  其他
关注(0)|答案(1)|浏览(197)

我目前在我的WinUI3应用程序中使用WebView2来显示从我们的服务器发送的一些HTML。
HTML本身不包含body / html标签,通过NavigateToString显示:

await web.EnsureCoreWebView2Async();
web.NavigationCompleted += async (sender, args) => await sender.ResizeToContent();  // more about this later
web.NavigateToString(someText);

当我在WebView中显示此HTML时,WebView的高度始终默认设置为0,我希望WebView自动调整其内容的大小(我不能为其容器设置固定大小并将WebView拉伸到它)。
我试着执行在那里找到的脚本来评估HTML的大小:How to get height of entire document with JavaScript?

public static async Task ResizeToContent(this WebView2 webView)
        {
            var script = "";
            var heightString = await webView.ExecuteScriptAsync(script);
            int height = 0;
            if (int.TryParse(heightString, out height))
            {
                webView.Height = height;
            }
        }

这里有2个不同的脚本我尝试:eval(document.documentElement.scrollHeight.toString());

;(function() {
    var pageHeight = 0;

    function findHighestNode(nodesList) {
        for (var i = nodesList.length - 1; i >= 0; i--) {
            if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
                var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
                pageHeight = Math.max(elHeight, pageHeight);
            }
            if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
        }
    }

    findHighestNode(document.documentElement.childNodes);
    return pageHeight;

})();

但在这两种情况下,无论提供什么HTML,它总是返回1040,即使是<p>test</p>这样的简单HTML
当我为我的WebView设置一个固定的高度时,比如说60,这个p在没有滚动条的情况下可以正确显示(而我的脚本将返回1040的高度),但是当我做一些复杂的HTML时,如果我打算比那些60 px大,webview会显示一个垂直滚动条。
总之,似乎WebView不知何故知道1040不是真实的的高度(否则我会一直有一个滚动条)。
请注意,我也尝试过用<html><body>{myText}</body></html>包围文本,结果相同。
我如何才能得到真实的的实际内容的高度?

  • 谢谢-谢谢
hlswsv35

hlswsv351#

在尝试了其他解决方案后,我得出了以下似乎有效的解决方案:
在我的视图模型中:

Text = $"<div id='container'>{_source.Text}</div>";

而在我的扩展方法中得到的高度:

public static async Task ResizeToContent(this WebView2 webView)
        {
            var script = "eval(document.getElementById('container').getBoundingClientRect().height.toString());";
            var heightString = await webView.ExecuteScriptAsync(script);
            if (int.TryParse(heightString, out int height))
            {
                webView.Height = height + 30;
            }
        }

我不得不添加+30,因为否则滚动条会显示,并且webview的内容会被稍微截断。
有没有什么更干净、更简单的方法来做到这一点?

相关问题