"Cannot invoke JavaScript outside of a WebView context" error when running Javascript in Blazor Hybrid

Question

I'm trying to use IJsruntime for importing a .js file to use in Blazor Hybrid (use in the razor component).

The service:

public class InitialDocumentHtmlService : IInitialDocumentHtmlService
{
    private readonly IJSRuntime runtime;

    public InitialDocumentHtmlService(IJSRuntime jsRuntime)
    {
        this.runtime = jsRuntime;

    }

    public async Task<string> GetColorAsync(CancellationToken token)
    {

// here u get exeption
        var helloword = await runtime.InvokeAsync<IJSObjectReference>("import", token,
            "./test.js");

        await helloword.InvokeVoidAsync("helloWorld", token);

    }
}

test.js:

export function helloWorld() {
    console.log("Hello");
    alert("hello");
}

However, it's only working in Blazor WebAssembly, while I get the following in Blazor Hybrid:

Exception:

This exception was originally thrown at this call stack:
Microsoft.AspNetCore.Components.WebView.Services.WebViewJSRuntime.BeginInvokeJS(long, string, string, Microsoft.JSInterop.JSCallResultType, long) in WebViewJSRuntime.cs
Microsoft.JSInterop.JSRuntime.InvokeAsync<TValue>(long, string, System.Threading.CancellationToken, object[])
Microsoft.JSInterop.JSRuntime.InvokeAsync<TValue>(string, System.Threading.CancellationToken, object[])
Microsoft.JSInterop.JSRuntimeExtensions.InvokeAsync<TValue>(Microsoft.JSInterop.IJSRuntime, string, System.Threading.CancellationToken, object[])
Datanex.Frontend.App.Modules.Services.InitialDocumentHtmlService.GetColorAsync(System.Threading.CancellationToken) in InitialDocumentHtmlService.cs
Datanex.Frontend.App.Modules.Services.InitialApp.InitAsync(System.Threading.CancellationToken) in InirialApp.cs
Datanex.Frontend.App.Component.Pages.Login.OnInitializedAsync() in Login.razor

Message:

Cannot invoke JavaScript outside of a WebView context.

What is causing this problem?

Luke Vo · Accepted Answer · 2024-10-08 10:30:19Z

1

Did you register IInitialDocumentHtmlService as a Singleton? I just had this issue as well and I guess in a hybrid app, the WebView isn't ready at the time your singleton service is registered yet.

In any case, I solved my issue by moving the IJSRuntime instance to the method instead of injecting it to the service:

// Change your service method:
public async Task<string> GetColorAsync(CancellationToken token, IJSRuntime js)
//...

// Then give your service this instance from the Blazor Component to ensure it's in the WebView context
@inject IJSRuntime Js; // Inject it into the Blazor component instead
// ...

GetColorAsync(ct, Js);

answered Oct 8, 2024 at 10:30

Luke Vo

21.6k25 gold badges135 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

madiyyarrrr Over a year ago

yes this is totally true all my services is singleton. me too , i sole my problem injecting JsRuntime in blazor component and pass in to my service

Liyun Zhang - MSFT · Accepted Answer · 2023-12-26 05:43:11Z

0

I can run run javascript in blazor hybrid successfully.

The Service Class:

namespace MauiApp3
{
    public class MyService
    {
        public IJSRuntime js;
        public MyService(IJSRuntime js)
        {
            this.js = js;
        }
        public async Task<string> Test(CancellationToken token)
        {
            var hello = await js.InvokeAsync<IJSObjectReference>("import",token, "./test.js");
            await hello.InvokeVoidAsync("helloword");
            return "hello";
        }
    }
}

The Razor Page:

@page "/counter"
@inject IJSRuntime js;
@using MauiApp3
<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private async void IncrementCount()
    {
        currentCount++;
        MyService myService = new MyService(js);
        string value = await myService.Test(new CancellationToken());
    }
}

And the structure of my project:

answered Dec 26, 2023 at 5:43

Liyun Zhang - MSFT

15.3k1 gold badge10 silver badges25 bronze badges

1 Comment

Liyun Zhang - MSFT Over a year ago

Did you add the js file in the project's index.html? And you can refer to this case that has the same error as yours. @madiyyarrrr

Collectives™ on Stack Overflow

"Cannot invoke JavaScript outside of a WebView context" error when running Javascript in Blazor Hybrid

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related