Firing customEvents with ExecuteScriptAsync()

[Antix-Development]

I am trying to trigger a custom "windowresize" event on my web page.

Form1.cs

public void DispatchWindowResizeEvent(string type)
{
    var script = $"window.dispatchEvent(new CustomEvent('windowresize', {{detail: {type} }}));";
    WebView.CoreWebView2.ExecuteScriptAsync(script);
}

app.js

window.addEventListener('windowresize', (e) => {
    console.log(e.detail);
});

There are no errors in either the VS debug output or the devtools console so I'm kind of confused why it won't work.

Can anyone help me get this working please? Thanks.

[Antix-Development]

Okay well I never thought the day would come, but ChatGPT actually solved a programming problem for me!! Here's what they had had to say when I asked them...

It seems like you're trying to create and dispatch a custom "windowresize" event in a WebView2 control using C# and JavaScript, but it's not working as expected. There might be a small issue in your code. Here's a possible solution:

• Ensure that you are calling the DispatchWindowResizeEvent method correctly from your C# code.
• In your JavaScript code, make sure you're correctly listening for the custom "windowresize" event.

Here's an updated version of your code with some corrections:

C# Code (hosted object):

public void DispatchWindowResizeEvent(string type)
{
   var script = $"var event = new CustomEvent('windowresize', {{ detail: '{type}' }}); window.dispatchEvent(event);";
   WebView.CoreWebView2.ExecuteScriptAsync(script);
}

JavaScript Code (web app):

window.addEventListener('windowresize', (e) => {
   console.log(e.detail);
});

Changes made:

• In C#, I enclosed the type variable in single quotes inside the JavaScript code to make sure it's treated as a string.
• I explicitly create the event object before dispatching it.

Make sure you call the DispatchWindowResizeEvent method with a string argument when you want to trigger the custom "windowresize" event in your web page. For example:

DispatchWindowResizeEvent("SomeType");

This should correctly trigger the event and log the detail in your web app's console.

Everything now works and my custom events are being sent and received correctly.