如何在不使用JS的情况下打开新窗口

Question

在 blazor 中，我用于NavigationManager.NavigateTo(url)更改窗口位置，但是如何使用它打开具有指定 URL 的新选项卡，而无需在上调用 JSOnAfterRenderAsync()

Answer 1

截至 2019 年 3 月 21 日，目前无法直接使用纯 Blazor 执行此操作，您需要使用 JSInterop。幸运的是，这很容易做到。在.razor文件顶部添加

@inject IJSRuntime JSRuntime;

然后像这样使用它

@inject IJSRuntime JSRuntime;

Answer 2

TypeError: Converting circular structure to JSON使用时你会得到

await _jsRuntime.InvokeVoidAsync("open", new object[2] { url, "_blank" });

或者

await _jsRuntime.InvokeAsync<object>("open", url, "_blank");

这是因为window.open返回一个WindowProxy对象（请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Window/open）。 WindowProxy不可 JSON 序列化，因此不能用作 .NET 代码的返回值。

摘自此处。

为了解决这个问题，不使用 javascript 函数，我使用以下代码

await JSRuntime.InvokeVoidAsync("eval", $"let _discard_ = open(`{url}`, `_blank`)");

Answer 3

以前，此代码有效。

await _jsRuntime.InvokeVoidAsync("open", new object[2] { url, "_blank" });

目前，它现在导致未捕获的异常：

> "TypeError: Converting circular structure to JSON

我发现这里解释了这种行为（https://github.com/dotnet/aspnetcore/issues/16632）：

这是因为 window.open 返回一个 WindowProxy 对象（参见 https://developer.mozilla.org/en-US/docs/Web/API/Window/open）。WindowProxy 不可 JSON 序列化，因此不能用作 .NET 代码的返回值。

要解决此问题，请不要直接调用 window.open，而是调用您自己的 JS 函数，该函数要么不返回任何内容，要么返回可 JSON 序列化的内容。

根据上述建议，我在 index.html 中添加了以下内容：

<script>
    window.blazorOpen = (args) => {
        window.open(args);
    };
</script>

并修改了我的 C# 代码隐藏调用以传递窗口参数：

await _jsRuntime.InvokeVoidAsync("blazorOpen", new object[2] { url, "_blank" });

我们现在通过丢弃由 window.open 返回的 WindowProxy 对象有效地避免了这个问题，该对象以前返回到 InvokeVoidAsync 并且 .NET 试图（不成功）处理。