.NET MAUI Blazor Hybrid how to intercept open in new tab

Andrew Denha 1

I use await JSRuntime.InvokeAsync<object>("open", path, "_blank");
in the .razor pages, how I can intercept this and open:

new tab in browse
new page in the windows platform
same page in the android/ios platform

Or how I can create events from my Components(.razor pages) project
to the MAUI and Web projects

I`m try to use in my MainLayout.razor(RazorPages project):
[Parameter]
public EventCallback<string> OpenNewWindowByUrl { get; set; }

But I do not understand how to subscribe to this event from MainPage.xaml(MAUI project) BlazorWebView or _Layout.cshtml

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 27,906 Reputation points Microsoft Vendor

2022-06-08T08:56:02.393+00:00
Hi @Andrew Denha , it seems that your main purpose is to open a MAUI page in BlazorWebview when the Blazor action is called, right?JSRuntime.InvokeAsync<object>("open", path, "_blank"); only works on Windows platform on my side. I'm not sure if you want to open a URL in Safari(iOS)/browse(Android), you could try to use Essentials: Launcher in Blazor.

<button @onclick="NavigateToNewTab"> NavigateToNewTab</button> @code { private async void NavigateToNewTab() { await Application.Current.MainPage.Navigation.PushAsync(new MyNewPage()); //if you have a navigation, you can go to the MAUI page(MyNewPage) directly // await JSRuntime.InvokeAsync<object>("open", "https://go.microsoft.com/fwlink/?linkid=2188693", "_blank");// only works on Windows // await Launcher.OpenAsync("https://go.microsoft.com/fwlink/?linkid=2188693");// open browser } }

In addition, may I ask if you do want to catch this js invoking method and call some c# codes/MAUI logic when the js method is triggered (not in click action)?
Andrew Denha 1 Reputation point

2022-06-08T11:55:29.087+00:00
Hi Wenyan Zhang,

My solution structure:

MAUI Blazor project

Web Blazor project

Razor class library(is used in both projects)

So, I have added your example to my NavMenu.razor from the Razor class library project, but I can`t use another MAUI dependency because it is not an MAUI library.

I think it makes sense to create an event in the razor class from the razor library project and subscribe to it in the project MAUI Blazor project and Web Blazor project.

After this, I can describe in the parent projects how it will be working on different platforms (open new window/open new tab in browser/use the same window to show additional razor page from the class library project).
.
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 27,906 Reputation points Microsoft Vendor

2022-06-27T08:13:45.717+00:00

The events in your Blazor library are as described in the documentation, right? Based on this documentation Host a Blazor web app in a .NET MAUI app using BlazorWebView - .NET MAUI | Microsoft Learn the user will be required to have WebView2 runtime installed for Windows. In .NET MAUI a BlazorWebView component is added, which can run full Blazor code, including css and the JavaScript interop (so it should run all kinds of JavaScript components)

Share via

.NET MAUI Blazor Hybrid how to intercept open in new tab