WebView2 中通过 JavaScript 获取页面内容高度的正确实现方法-js教程-PHP中文网

WebView2 中通过 JavaScript 获取页面内容高度的正确实现方法

在 WebView2 中，导航完成后立即执行 JavaScript 获取元素高度常因渲染未完成而返回错误值；需确保 DOM 和样式完全就绪后再测量，推荐使用 window.chrome.webview.postMessage 机制或 setTimeout 延迟回调，并避免使用 eval。

在 webview2 中，导航完成后立即执行 javascript 获取页面内容高度常因渲染未完成而返回错误值；需确保 dom 和样式完全就绪后再测量，推荐使用 `window.chrome.webview.postmessage` 机制或 `settimeout` 延迟回调，并避免使用 `eval`。

WebView2 的 NavigationCompleted 事件仅表示导航请求已完成（即 HTML 已加载、DOM 已解析），并不保证 CSS 样式已应用、布局已计算完毕、图片等资源已渲染完成。因此，若在该事件中立即调用 document.getElementById('content').offsetHeight，很可能获取到的是未完全渲染前的“占位高度”（例如 0 或过小值），尤其在内容较长、含异步资源或复杂布局时更为明显。

你最初使用的 setTimeout(wait, 10) 方式存在根本性误解：setTimeout 是异步调度，但后续的 height 计算语句并未被延迟执行，而是紧随其后立即运行。JavaScript 引擎会先注册定时器，然后立刻继续执行下一行——此时 offsetHeight 仍取自未就绪的 DOM 状态。

✅ 正确做法是将全部依赖渲染完成的逻辑封装进回调函数中：

// ✅ 正确：将高度计算和 postMessage 都放入 setTimeout 回调
string script = @"
    setTimeout(() => {
        const content = document.getElementById('content');
        if (content) {
            const height = content.offsetHeight;
            console.log('Measured height:', height);
            window.chrome.webview.postMessage(JSON.stringify({ type: 'height', value: height }));
        }
    }, 100); // 建议 100ms 起步，可依实际复杂度调整
";
await webView.ExecuteScriptAsync(script);

更健壮、推荐的方案是利用 window.onload 或 requestAnimationFrame 确保布局完成：

Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式，用于飞书日历导入导出及数据集成。

下载

// ✅ 推荐：等待页面完全加载 + 下一帧渲染完成
string script = @"
    window.addEventListener('load', () => {
        requestAnimationFrame(() => {
            const content = document.getElementById('content');
            if (content) {
                window.chrome.webview.postMessage(
                    JSON.stringify({ type: 'height', value: content.offsetHeight })
                );
            }
        });
    });
";
await webView.ExecuteScriptAsync(script);

在 C# 端，配合 WebMessageReceived 事件安全接收：

webView.WebMessageReceived += (sender, args) =>
{
    try
    {
        var message = JsonSerializer.Deserialize<webmessage>(args.TryGetWebMessageAsString());
        if (message?.Type == "height" && int.TryParse(message.Value?.ToString(), out int h))
        {
            int w = position == POSITION_MENU 
                ? ApplicationFramework.MENU_WIDTH - ApplicationFramework.PADDING 
                : ScreenFramework.getPanelContentWidthWithPadding();

            webView.MinimumSize = new Size(w, 0);
            webView.MaximumSize = new Size(w, h + 2 * ApplicationFramework.MARGIN);
            webView.Size = new Size(w, h + 2 * ApplicationFramework.MARGIN);
            webView.Visible = true;
        }
    }
    catch (JsonException) { /* 忽略无效消息 */ }
};

// 辅助类
record WebMessage(string Type, object Value);</webmessage>

⚠️ 注意事项：

禁用 eval：原始代码中 eval(height) 完全无必要，且存在严重安全与性能风险，应彻底移除；
避免硬编码延时：setTimeout(..., 10) 不可靠；优先采用 load + requestAnimationFrame 组合，或监听 MutationObserver 监控目标元素尺寸变化；
检查元素是否存在：务必校验 document.getElementById('content') 是否为 null，防止脚本崩溃；
考虑滚动容器影响：若 #content 内部有 overflow: auto，offsetHeight 返回的是容器自身高度而非内容总高，此时应改用 scrollHeight；
启用 WebView2 调试支持：开发阶段开启 CoreWebView2Settings.AreDevToolsEnabled = true，便于在 DevTools 中验证 DOM 状态与样式计算。