Blazor JavaScript更新文档标题

[删除（380066935@qq.com或微信通知）]

更好的阅读体验请查看原文:https://blazor-university.com/javascript-interop/calling-javascript-from-dotnet/updating-the-document-title/

更新文档标题


在创建 Blazor 布局部分中，我们看到了 Blazor 应用在 HTML（或 cshtml）文档中的生存方式。 并且只能控制主应用程序元素中的内容。

不是单页应用程序的网站可以通过添加元素来指定要在浏览器选项卡中显示的文本 在部分内，但我们的 Blazor 应用实际上并未导航到不同的服务器页面， 因此，它们都具有应用程序启动时加载的相同文档标题。<title><head>

我们现在将使用一个新组件来修复此问题，该组件将使用 JavaScript 互操作来设置 ， 这将反映在浏览器的选项卡中。 我们将创建它作为 Blazor 服务器应用程序;它可以很容易地在可重用的组件库中创建， 但我会把它留给你一个练习。<Document>document.title

创建新的 Blazor 服务器应用程序，然后在 wwwroot 文件夹中创建一个脚本文件夹， 并在其中创建一个名为 DocumentInterop.js 的脚本，其中包含以下脚本。

var BlazorUniversity = BlazorUniversity || {};
BlazorUniversity.setDocumentTitle = function (title) {
    document.title = title;
};

这将创建一个以名为 的函数命名的对象，该函数采用新标题和 将其分配给 。BlazorUniversitysetDocumentTitledocument.title

接下来，编辑 /Pages/_Host.cshtml 文件并添加对新脚本的引用。

<script src="\_framework/blazor.server.js"></script>
<script src="~/scripts/DocumentInterop.js"></script>

最后，我们需要组件本身。在 /Shared 文件夹中，创建一个名为的新组件并输入以下标记。DocumentDocument.razor

@inject IJSRuntime JSRuntime
@code {
    [Parameter]
    public string Title { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        await JSRuntime.InvokeVoidAsync("BlazorUniversity.setDocumentTitle", Title);
    }
}

此代码中存在故意错误。运行应用程序，您将看到一个调用 的行。NullReferenceExceptionJSRuntime.InvokeVoidAsync

原因是 Blazor 在将控制权移交给客户端之前在服务器上运行预呈现阶段。 此预呈现的目的是从服务器返回有效的呈现 HTML，以便

  • 网络爬虫，如谷歌，可以索引我们的网站。
  • 用户会立即看到结果。

这里的问题是，当预渲染阶段运行时，没有浏览器可以与之互操作。 可能的解决方案是JSRuntime

  1. 编辑 /Pages/_Host.cshtml 并更改为
    Pro：一个简单的修复。
    缺点：谷歌等在访问我们网站的页面时不会看到任何内容。    <component type="typeof(App)" render-mode="ServerPrerendered" /><component type="typeof(App)" render-mode="Server"/>
  2. 而不是覆盖覆盖 。OnParametersSetAsyncOnAfterRenderAsync

#2是解决问题的正确方法。

@inject IJSRuntime JSRuntime
@code {
    [Parameter]
    public string Title { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await JSRuntime.InvokeVoidAsync("BlazorUniversity.setDocumentTitle", Title);
    }
}

正如 JavaScript 启动过程一节中所解释的， 当服务器在发送网站之前预呈现网站时，它会在客户端浏览器上呈现应用程序组件，而无需 任何JavaScript。调用这些方法时设置为仅在呈现 HTML 后 在浏览器中。OnAfterRender*firstRendertrue

使用新的文档组件

编辑 /Pages 文件夹中的每个页面，并添加新元素 - 但显然，您希望在浏览器的选项卡中显示正确的文本。<Document Title="Index"/>