WPF中WebView2与C#通信失败如何解决？

Question

在使用WPF中WebView2控件时，常出现C#与JavaScript通信失败的问题，典型表现为`window.chrome.webview.postMessage()`无法触发C#端的`WebMessageReceived`事件。可能原因包括：WebView2未完成初始化即调用通信方法、未正确注册`WebMessageReceived`事件处理程序、或JavaScript中postMessage调用目标上下文错误。此外，页面导航导致的脚本执行时机不当也会引发通信丢失。需确保环境就绪并采用异步等待机制。

Answer 1

WPF中WebView2与JavaScript通信失败的深度解析与解决方案

1. 问题背景与现象描述

在使用WPF集成WebView2控件时，开发者常遇到C#与JavaScript之间通信失败的问题。典型表现为：调用window.chrome.webview.postMessage()后，C#端注册的WebMessageReceived事件未被触发。

该问题直接影响应用的双向交互能力，如前端页面向WPF主程序传递用户操作、状态变更等关键信息。

常见错误场景包括：

• WebView2尚未完成初始化即执行postMessage
• WebMessageReceived事件未正确注册或被意外注销
• JavaScript运行在错误的上下文中（例如非允许域或iframe）
• 页面导航导致脚本提前注入或延迟执行

2. 核心机制分析

WebView2通过Chromium内核实现现代Web渲染，并提供window.chrome.webview对象作为原生桥接接口。其通信模型基于消息传递机制：

1. JavaScript调用postMessage(data)将数据发送至宿主
2. WebView2运行时捕获该调用并转发给.NET事件系统
3. C#侧通过订阅WebMessageReceived接收并处理消息

此过程依赖于以下前提条件：

前提	说明
WebView2初始化完成	EnsureCoreWebView2Async已成功返回
事件处理器已注册	WebMessageReceived += handler 已执行
脚本注入时机正确	NavigationCompleted后注入JS代码
目标上下文有效	脚本运行在允许访问chrome.webview的页面

3. 常见错误模式与排查路径

根据实际项目经验，以下是高频出错点及其验证方式：

// 错误示例：未等待CoreWebView2初始化
private void BadApproach()
{
    webView.CoreWebView2.PostWebMessageAsString("hello"); // 可能NullReferenceException
}

// 正确做法：异步等待初始化完成
private async Task GoodApproach()
{
    await webView.EnsureCoreWebView2Async();
    webView.CoreWebView2.PostWebMessageAsString("hello");
}
    

4. 解决方案体系构建

为确保通信稳定，需建立完整的初始化与通信保障机制：

graph TD
            A[启动WPF应用] --> B{WebView2是否已加载XAML?}
            B -->|否| C[等待Loaded事件]
            B -->|是| D[调用EnsureCoreWebView2Async]
            D --> E{初始化成功?}
            E -->|否| F[重试或报错]
            E -->|是| G[注册WebMessageReceived事件]
            G --> H[注入JavaScript脚本]
            H --> I[监听页面NavigationCompleted以处理后续导航]
            I --> J[启用双向通信]

5. 推荐实践代码模板

以下为生产级推荐实现结构：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        webView.NavigationCompleted += OnNavigationCompleted;
        InitializeWebView2Async();
    }

    private async void InitializeWebView2Async()
    {
        try
        {
            await webView.EnsureCoreWebView2Async();
            webView.CoreWebView2.WebMessageReceived += OnWebMessageReceived;
            InjectScriptAfterNavigation();
        }
        catch (Exception ex)
        {
            MessageBox.Show($"WebView2初始化失败: {ex.Message}");
        }
    }

    private void OnNavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
    {
        if (e.IsSuccess)
        {
            InjectScriptAfterNavigation();
        }
    }

    private void InjectScriptAfterNavigation()
    {
        const string script = @"
            window.chrome.webview.postMessage('Page loaded and ready!');
            document.addEventListener('click', () => {
                window.chrome.webview.postMessage('User clicked');
            });
        ";
        webView.CoreWebView2?.ExecuteScriptAsync(script);
    }

    private void OnWebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
    {
        var message = e.TryGetWebMessageAsString();
        Dispatcher.Invoke(() => MessageBox.Show($"收到消息: {message}"));
    }
}