如何在WebView2中监控网页局部变更并触发应用方法

针对网页局部更新时无法触发导航事件的问题，推荐以下两种实用方案：

方案一：使用MutationObserver监听DOM属性变化（推荐） #

这是精准高效的DOM变更监听方案，专门适配局部更新场景。

实现步骤： #

1. 注入监听脚本：在WebView2首次加载完成后（比如NavigationCompleted事件回调中），注入一段JavaScript脚本，通过MutationObserver监听目标div的style属性变化。
2. 向应用发送通知：当检测到目标div的display值从none变为block时，调用window.chrome.webview.postMessage()向应用端传递触发信号。
3. 应用端处理回调：在WebView2的WebMessageReceived事件中监听消息，收到信号后执行你的特定方法。

代码示例：

C# 应用端代码：

// 页面加载完成后注入监听脚本
private async void WebView2_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
{
    if (e.IsSuccess)
    {
        // 替换#target-div为你的目标div选择器
        string monitorScript = @"
            const targetDiv = document.querySelector('#target-div');
            if (targetDiv) {
                const observer = new MutationObserver((mutations) => {
                    mutations.forEach(mutation => {
                        if (mutation.attributeName === 'style') {
                            const currentDisplay = window.getComputedStyle(targetDiv).display;
                            if (currentDisplay === 'block') {
                                window.chrome.webview.postMessage('div-display-switched-to-block');
                            }
                        }
                    });
                });
                // 仅监听style属性变更
                observer.observe(targetDiv, { attributes: true, attributeFilter: ['style'] });
            }
        ";
        await webView2.CoreWebView2.ExecuteScriptAsync(monitorScript);
    }
}

// 接收网页发送的消息并触发方法
private void WebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
{
    if (e.TryGetWebMessageAsString() == "div-display-switched-to-block")
    {
        YourSpecificMethod(); // 调用你的业务方法
    }
}

方案二：定时检查元素状态（简单场景备选） #

如果页面变更逻辑简单，可采用定时轮询的方式，适合对性能要求不高的场景。

实现步骤： #

1. 启动定时任务：在WebView2加载完成后，启动一个定时器（建议间隔500ms以上，避免性能损耗）。
2. 定期执行检查脚本：每次定时器触发时，调用ExecuteScriptAsync获取目标div的display值。
3. 对比状态触发方法：将当前值与上一次记录的值对比，若从none变为block，则触发特定方法。

代码示例：

C# 应用端代码：

private string _lastDisplayStatus = "none";
private System.Timers.Timer _statusCheckTimer;

private async void WebView2_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
{
    if (e.IsSuccess)
    {
        _statusCheckTimer = new System.Timers.Timer(500); // 每500ms检查一次
        _statusCheckTimer.Elapsed += async (s, args) =>
        {
            string checkScript = @"
                const targetDiv = document.querySelector('#target-div');
                targetDiv ? window.getComputedStyle(targetDiv).display : 'none';
            ";
            string currentDisplay = await webView2.CoreWebView2.ExecuteScriptAsync(checkScript);
            currentDisplay = currentDisplay.Trim('"'); // 去除JSON字符串的引号
            
            if (_lastDisplayStatus == "none" && currentDisplay == "block")
            {
                // 注意UI线程调用
                Dispatcher.Invoke(() => YourSpecificMethod());
            }
            _lastDisplayStatus = currentDisplay;
        };
        _statusCheckTimer.Start();
    }
}

// 窗口关闭时清理定时器
private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
{
    _statusCheckTimer?.Stop();
    _statusCheckTimer?.Dispose();
}

关键注意点： #

• 确保目标div的选择器（如#target-div）准确，若元素是动态生成的，可在脚本中添加setInterval先等待元素加载完成再启动监听。
• 使用window.getComputedStyle()而非直接读取element.style.display，前者能捕获CSS类或样式表设置的样式，后者仅能读取内联样式。

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