Angular+WPF WebView2中CoreWebView2_WebMessageReceived事件未触发问题

问题背景 #

开发了一个包含按钮和文本框的Angular Web应用，被WPF用户控件的WebView2加载。点击按钮时需将文本框内容转为JSON字符串发送给WebView2，但用户控件中的CoreWebView2_WebMessageReceived事件始终未触发。

原代码问题分析 #

1. Angular端消息发送方式错误：使用window.parent.postMessage是针对iframe嵌套场景的，WebView2加载的页面应直接通过window.chrome.webview.postMessage与宿主通信。
2. 冗余的消息转发脚本：WPF端添加的message事件监听完全多余，且原逻辑中window.parent.postMessage发送的消息并不会被当前页面的message事件捕获。
3. 提前关闭页面：window.parent.close()会导致页面在消息发送完成前就被关闭，中断通信流程。

修复步骤及完整代码 #

1. 修改Angular端代码 #

Handler.js

exports.SendMessageToParent = function(jsonObject){
    console.log("function called");
    // 直接使用WebView2专属的通信API发送消息
    if(window.chrome?.webview){
        window.chrome.webview.postMessage(jsonObject);
    } else {
        console.warn("当前环境不是WebView2");
    }
    // 移除提前关闭页面的代码，如需关闭可在确认消息发送后处理
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { SendMessageToParent } from '../app/Handlers.js';

@Component({
  selector: 'app-root',
  template: `<input [(ngModel)]="webtext" type="text" placeholder="输入内容">
             <button (click)="OnClick()">发送到WPF</button>`
})
export class AppComponent implements OnInit {
  webtext: string = '';

  ngOnInit(): void { }

  OnClick(){
    console.log("输入内容：", this.webtext);
    const JSONData = { Key1: this.webtext };
    const jsonObject = JSON.stringify(JSONData);
    
    SendMessageToParent(jsonObject);
  }
}

2. 修改WPF用户控件代码 #

移除冗余的消息转发脚本，确保事件绑定在导航前完成：

private async void Initialize()
{
    webView2.CoreWebView2InitializationCompleted += WebView2_CoreWebView2InitializationCompleted;
    await webView2.EnsureCoreWebView2Async();
}

private void WebView2_CoreWebView2InitializationCompleted(object? sender, CoreWebView2InitializationCompletedEventArgs e)
{
    if(e.IsSuccess)
    {
        // 先绑定消息接收事件，再导航到Angular页面
        webView2.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;
        webView2.CoreWebView2.Navigate("http://localhost:4200/");
    }
}

private void CoreWebView2_WebMessageReceived(object? sender, CoreWebView2WebMessageReceivedEventArgs e)
{
    // 定义对应的数据模型类来解析JSON
    var data = JsonSerializer.Deserialize<MessageModel>(e.WebMessageAsJson);
    
    // 将数据传递出去
    WebDataReceived?.Invoke(this, data?.Key1);
}

// 用于解析JSON的数据模型
public class MessageModel
{
    public string Key1 { get; set; } = string.Empty;
}

额外注意事项 #

• 确保WebView2控件已正确初始化，Angular页面能正常访问。
• 在Angular项目的模块中需引入FormsModule，才能使用[(ngModel)]双向绑定。

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