Blazor Web App脚本执行问题：如何强制导航时重新运行脚本

问题1：Blazor Web App中script标签的执行触发条件 #

Blazor Web App（交互式模式下）基于单页应用(SPA)机制运行，script标签的执行逻辑如下：

• 触发执行的场景：当通过URL直接访问、浏览器刷新页面时，浏览器会完整加载整个HTML文档，页面内的<script>标签会被浏览器自动执行。此时test.js会向head中添加style元素，将背景改为绿色。
• 不触发执行的场景：点击Blazor内置导航链接（如左侧栏的Home、Counter、Weather）时，Blazor采用客户端路由机制，仅更新页面局部内容，不会重新加载整个HTML文档，因此初始的<script>标签不会再次执行。同时Blazor在导航过程中会重置head区域的部分内容，导致之前添加的style标签被移除，最终背景恢复默认。

问题2：导航时强制脚本每次重新运行的方法 #

以下是几种可行的实现方式：

方式1：监听Blazor导航事件 #

借助NavigationManager监听页面导航完成事件，手动调用脚本函数：

1. 重构test.js，将逻辑封装为可调用的全局函数：

// test.js
window.setGreenBackground = function() {
    // 先移除已存在的style标签，避免重复添加
    const existingStyle = document.querySelector('#green-bg-style');
    if (existingStyle) existingStyle.remove();
    
    const style = document.createElement('style');
    style.id = 'green-bg-style';
    style.textContent = 'body { background-color: green; }';
    document.head.appendChild(style);
};

2. 在根布局组件（如MainLayout.razor）中注入NavigationManager并绑定事件：

@inject NavigationManager NavManager
@inject IJSRuntime JS
@implements IDisposable

@* 布局内容 *@

@code {
    protected override void OnInitialized()
    {
        NavManager.LocationChanged += HandleLocationChanged;
        // 初始化时执行一次
        _ = JS.InvokeVoidAsync("setGreenBackground");
    }

    private async void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        await JS.InvokeVoidAsync("setGreenBackground");
    }

    public void Dispose()
    {
        NavManager.LocationChanged -= HandleLocationChanged;
    }
}

方式2：利用组件生命周期方法 #

如果仅需在特定组件加载时运行脚本，可在组件的AfterRenderAsync方法中调用：

@inject IJSRuntime JS

@* 组件内容 *@

@code {
    protected override async Task AfterRenderAsync(bool firstRender)
    {
        // 每次组件渲染完成后执行，包括导航到该组件时
        await JS.InvokeVoidAsync("setGreenBackground");
    }
}

方式3：自定义导航链接 #

自定义导航逻辑，点击链接时先执行脚本再完成导航：

@inject NavigationManager NavManager
@inject IJSRuntime JS

<a @onclick="NavigateWithScript">Home</a>

@code {
    private async Task NavigateWithScript()
    {
        await JS.InvokeVoidAsync("setGreenBackground");
        NavManager.NavigateTo("/");
    }
}

内容的提问来源于stack exchange，提问作者Thunderbird