CoreWebView2_WebMessageReceived not getting triggered

Question

I have an Angular web app with a simple button and a text box. This app will be loaded by the WebView2 control contained in a WPF user control.

I'm looking to send a JSON string for the text box text upon clicking the button. This JSON string will be posted as a message to the WebView2 and thus to be further processed by the user control. However, event handler for the event 'WebMessageReceived' is not getting triggered inside the user control class.

here are all the codes: Angular: Handler.js:

exports.SendMessageToParent=function (jsonObject){
    console.log("function called");
    window.parent.postMessage(jsonObject,'*');
    window.parent.close();
}

app.component.ts:

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

  OnClick(){
  console.log(this.webtext)
  const JSONData = {Key1: this.webtext};
  const jsonObject = JSON.stringify(JSONData);
  
  SendMessageToParent(jsonObject);
  }

User control class: EDITED

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

}

private async void WebView2_CoreWebView2InitializationCompleted(object? sender, CoreWebView2InitializationCompletedEventArgs e)
{
    if(e.IsSuccess)
    {
        webView2.CoreWebView2.Navigate("http://localhost:4200/");
        await webView2.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(
            "window.addEventListener('message', event => 
            {window.chrome.postMessage(event.data);})"
            );
        webView2.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;
    }
}

private void CoreWebView2_WebMessageReceived(object? sender, CoreWebView2WebMessageReceivedEventArgs e)
{
    // Deserialize JSON data
    var data = JsonSerializer.Deserialize<string>(e.WebMessageAsJson);

    // Raise event with incoming data
    WebDataReceived?.Invoke(this, data);
}

I have a number of [WebView2 posts](https://stackoverflow.com/search?q=user%3A10024425+webview2) that show how to initialize WebView2 which may be helpful. — Tu deschizi eu inchid, Apr 26 '23 at 17:04

score 0 · Accepted Answer · answered Apr 26 '23 at 20:30

0

In the above you are calling window.chrome.postMessage when you should be calling window.chrome.webview.postMessage. See window.postMessage VS window.chrome.webview.postMessage and WebView2 postMessage docs for more information.

        await webView2.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(
            "window.addEventListener('message', event => 
            {window.chrome.webview.postMessage(event.data);})"
            );

answered Apr 26 '23 at 20:30

David Risney

3,886
15
16

This did not work and the issue persists – sandy Apr 27 '23 at 03:31
Oh also, you are calling AddScriptToExecuteOnDocumentCreatedAsync after the Navigate. You should be calling AddScript before Navigate and you should await it to ensure that the script to execute is done being added before navigating. Also, I've read that some folks have issues with calling AddScriptToExecute for the first navigate. You might try navigating to about:blank first, then await AddScriptToExecute, then Navigate. – David Risney Apr 27 '23 at 17:16

CoreWebView2_WebMessageReceived not getting triggered

1 Answers1