Blazor Hybrid - Allow `window.open()` from JavaScript to automatically open a `WebView`

[mrlife]

Description

Allow Blazor Hybrid apps to respond to window.open() from JavaScript and open in a WebView.

Right now, window.open() does not run.

Public API Changes

The following button conforms to a third party API's spec for launching an authentication workflow via window.open().

BlazorWebView should open a WebView just as a browser would open a window.

<button id="ThirdPartyAuthButton">Authenticate with third party</button>

Intended Use-Case

When using a third party JavaScript API, sometimes the API opens a new browser window using window.open() to facilitate authentication with the third party.

This works well with Blazor but does not work with Blazor Hybrid.

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[Eilon]

@mrlife - Can you clarify exactly what you expect to happen with window.open? Also, can you show the exact call to window.open that you'd like to use?

I tried this:

<button id="ThirdPartyAuthButton" onclick="window.open('https://bing.com/')">Authenticate with third party</button>

And on Windows it worked fine. On Android interestingly it crashed the app (more details below). But a lot of this can depend on exactly what you want to happen, and exactly which parameters are passed to window.open.

Details on the Android crash (which is certainly a bug in BlazorWebView):

With <button onclick="window.open('https://bing.com/')">Open</button> it ends up getting a Java exception in this call to the Java Uri.Parse (this is not the .NET Uri type) because the requestUrl variable is null. I debugged it to see if there's some other way to get the URL in this scenario but I couldn't find it. The view parameter doesn't seem to have anything interesting on it. So I think it's easy to make it not throw an exception (just check for null and ignore), I'm not sure how to make this scenario work. I also haven't tested other variations of window.open because that might affect whether this works.

[mrlife]

Hi @Eilon, thanks for checking this out!

On Windows, did it open in a WebView or the external browser?

Can you clarify exactly what you expect to happen with window.open?

An in-app WebView that loads the URL would be best since it won't take the user away from the app.

Also, can you show the exact call to window.open that you'd like to use?

Here is an example of what the window.open call would look like:

window.open("https://example.com?a=1&b=2", "example-window-name", "height=500,menubar=no,resizable=no,scrollbars=no,status=no,toolbar=no,width=500");

[f4n0]

any news?

[mrlife]

Hi @Eilon, I was wondering if you thought this was something that could be implemented. I really appreciate your time.

[rkokal]

@Eilon I am also looking towards a solution to this.

[Eilon]

Hi, I'm not sure when I'll have more time to investigate, but there's a workaround that I think in general will work fine:

1. Handle the button/link's 'click' event in C#, for example: <button @onclick="HandleWindowOpen">Open Link</button>
2. In the C# event handler launch whatever window/browser you want: void HandleWindowOpen(object sender, EventArgs e) => <run code to launch browser/window>

[mrlife]

Hi @Eilon, thanks for the suggestion. For the purpose behind creating this issue, the workaround does not seem to apply, as the window.open() is called by a third party script. Please let me know if I misunderstood something.

[Eilon]

@mrlife ah understood, then indeed the workaround won't quite apply there. We'll keep this bug open so that we can investigate a potential fix.

[f4n0]

Hi @Eilon Is there something that we may do to speed up the resolution of this issue?

[Eilon]

@f4n0 hmm I'm not sure. Is it possible to monkey-patch the window.open() API so that it does call into C#, and then open a new window?

[mrlife]

Hi @Eilon, monkey patch could be a useful first part of a workaround, but is there a way to open the URL in-app in some sort of container (window, web view, etc.) on all supported platforms? I have searched without finding a way.

Side note: HybridWebView would be a great solution with remote source support. You mentioned there possibly being a workaround for that?

[Eilon]

@mrlife right now I don't think there's any "easy" way to do it. I suggest trying to monkey-patch and having that use something like JS Interop to call into C#, and then from C# open a new window (either a new app window, or a browser, etc.).

HybridWebView doesn't have any specific solution to this issue either right now.