完全渲染后 blazor 中的 window.status答案

【问题标题】：window.status in blazor after completely render完全渲染后 blazor 中的 window.status
【发布时间】：2021-04-13 00:30:37
【问题描述】：

我想写 'window.status="完成"' 当 Blazor 页面在后面的代码中完全加载时。

我对 JS 知之甚少。

【问题讨论】：

阅读文档：docs.microsoft.com/en-us/aspnet/core/blazor/…

标签： javascript blazor blazor-client-side blazor-webassembly

【解决方案1】：

Blazor 为您提供了与 DOM 交互的绝佳机会，并且在大多数情况下，javascript 不再是必需品。不幸的是，就像您的情况一样，我们无法“到达”窗口。它在层次结构中太高了。而且我们需要使用 Javascript 互操作。

如果您将 WASM 或 Host.cshtml 用于服务器端 Blazor，第一步是创建一个 javascript 文件并将其作为链接包含在 index.html 中。或者，您可以将其嵌入到文档中。

<script type="text/javascript">
myAppNamespace.setCompleteStatus= function (status) {
  document.status = status;
};
</script>

最好将脚本保存在自己的命名空间中。也就是前面例子中的myAppNamespace。 Blazor 稍后将需要此信息来调用正确的函数。

在应该触发此操作的组件中，注入 javascript Interop 服务。

@inject IJSRuntime jsruntime

每个 Blazor 组件都有一个生命周期，根据其状态执行不同的方法。在所有渲染完成后执行方法OnAfterRenderAsync。您可以覆盖它并执行您的 javascript。

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if(firstRender == true)
        {
            await jsruntime.InvokeVoidAsync("myAppNamespace.setCompleteStatus", "insert status here");
        }
    }

顾名思义，firstRender 仅在组件添加到 DOM 后才设置为 true。如果您需要多次更改状态，您可以删除条件。请记住，在此方法调用中也要更改 myAppNamespace。

【讨论】：

【解决方案2】：

window.status 不再支持浏览器并且已被弃用，因此不应使用。

阅读以下链接中的弃用详细信息：

【讨论】：