WinUI3：获取WebView2 HTML高度

qnakjoqk 于 2022-11-27 发布在其他

关注(0)|答案(1)|浏览(198)

我目前在我的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>包围文本，结果相同。
我如何才能得到真实的的实际内容的高度？

谢谢-谢谢

Html

来源：https://stackoverflow.com/questions/74564105/winui3-get-the-webview2-html-height

1条答案

按热度按时间

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的内容会被稍微截断。
有没有什么更干净、更简单的方法来做到这一点？

赞(0）回复(0）举报 2022-11-27

我来回答

WinUI3：获取WebView2 HTML高度

1条答案

相关问题

热门标签

最新问答