Inject Javascript in BlazorWebView

Question

i'm trying MAUI Blazor and potentially it's really cool, but i had some problems ( a lot). I want to call some javascript function to the main blazorwebview but i don't know how to do it. From MainLoyout.razor i take the blazorwebview.

<b:BlazorWebView x:Name="mainView"  HostPage="wwwroot/index.html">
    <b:BlazorWebView.RootComponents>
        <b:RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
    </b:BlazorWebView.RootComponents>
</b:BlazorWebView>

But from here i don't know how to inject javascript. Thanks

Answer 1

Please look at the following documentation: https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript?view=aspnetcore-6.0

MainPage.xaml

<Button Text="Press me" Clicked="button_Clicked"/>
<b:BlazorWebView HostPage="wwwroot/index.html"></b:BlazorWebView>

MainPage.xaml.cs

private async void button_Clicked(object sender, EventArgs e)
{
    var js = webView.Handler.MauiContext.Services.GetService<IJSRuntime>();
    var result = await js.InvokeAsync<string>("executeMe", "DEF");

    // Look at the Visual Studio Output window to see this message
    Debug.WriteLine(result);
}

MauiProgram.cs

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        builder.Services.AddMauiBlazorWebView();

        builder.Services.AddBlazorWebViewDeveloperTools();

        return builder.Build();
    }

    [JSInvokable]
    public static async Task<string> CallMeFromJs(string a)
    {
        return a + " OK!";
    }
}

index.html

<input type="button" id="btn" value="Call .Net" />
<script type="text/javascript">
    window.executeMe = (a) => {
        // Click on BlazorWebView and press F12 to open DevTools to see the console logs
        // You might need to add builder.Services.AddBlazorWebViewDeveloperTools(); in the CreateMauiApp() method
        console.log("Call: " + a);
        return a + " OK!";
    };
</script>
<script type="text/javascript">
    document.getElementById('btn').onclick = function () {
        DotNet.invokeMethodAsync('MauiApp1', 'CallMeFromJs', 'ABC')
            .then(data => {
                // Click on BlazorWebView and press F12 to open DevTools to see the console logs
                // You might need to add builder.Services.AddBlazorWebViewDeveloperTools(); in the CreateMauiApp() method
                console.log(data);
            });
    };
</script>
<script src="_framework/blazor.webview.js" autostart="false"></script>

I hope it helps.