Blazor .NET 8中如何在渲染间持久化JavaScript脚本？

针对你遇到的预渲染后脚本失效、页面闪烁问题，给你几个可行的解决办法：

1. 将脚本移至根页面index.html #

把需要持久化的脚本直接放到wwwroot/index.html的<body>标签末尾（建议放在Blazor的<script src="_framework/blazor.web.js"></script>之后）。因为index.html是整个应用的入口页面，不会被Blazor的渲染流程替换，脚本在这里加载后会一直存在于页面中，不受预渲染和交互式切换的影响。

示例：

<!-- wwwroot/index.html -->
<body>
    <div id="app">Loading...</div>
    <script src="_framework/blazor.web.js"></script>
    <script>
        // 你的持久化脚本逻辑，比如初始化第三方UI库
        function initGlobalScript() {
            console.log("脚本已加载，且会一直生效");
            // 比如绑定事件、初始化组件等操作
        }
        // 页面加载时执行
        window.addEventListener('load', initGlobalScript);
    </script>
</body>

2. 用IJSRuntime在交互式渲染完成后初始化脚本 #

如果脚本需要依赖Blazor渲染的DOM元素，可以在交互式组件（比如MainLayout.razor或者App.razor的交互式区域）中，通过IJSRuntime延迟执行脚本初始化，确保交互式渲染完成后再绑定脚本逻辑。

步骤：

• 首先在wwwroot/js目录下创建一个脚本文件（比如scripts.js），写入初始化逻辑：

// wwwroot/js/scripts.js
export function initInteractiveScript() {
    // 这里写需要在交互式渲染后执行的脚本逻辑
    // 比如绑定按钮点击事件、初始化图表等
    document.getElementById("my-button").addEventListener("click", () => {
        alert("交互式模式下脚本生效");
    });
}

• 在index.html中引入这个脚本：

<script src="js/scripts.js"></script>

• 在Blazor组件中注入IJSRuntime，并在OnAfterRenderAsync中调用初始化方法：

@inject IJSRuntime JS
@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 确保只在第一次交互式渲染完成后执行
            await JS.InvokeVoidAsync("initInteractiveScript");
        }
    }
}

3. 正确使用data-permanent属性 #

之前你用data-permanent无效，大概率是使用方式不对。这个属性需要标记在不需要被Blazor hydration替换的DOM元素上，比如包含脚本的容器，或者脚本依赖的DOM元素。

正确示例：

<!-- App.razor中 -->
<div data-permanent>
    <!-- 这个容器内的内容会在预渲染和交互式渲染中被保留，不会被替换 -->
    <button id="my-permanent-button">永久按钮</button>
    <script>
        // 脚本放在data-permanent容器内，会被保留
        document.getElementById("my-permanent-button").addEventListener("click", () => {
            alert("按钮事件在渲染切换后依然生效");
        });
    </script>
</div>

注意：data-permanent属性要加在Blazor组件不会重新生成的父容器上，确保整个容器在hydration过程中被保留，里面的脚本和DOM元素才不会被替换。

4. 仅在交互式渲染阶段加载脚本 #

如果脚本不需要在预渲染阶段执行，可以在App.razor中判断当前是否为交互式渲染，只在该阶段加载脚本，避免预渲染和交互式阶段的冲突：

@if (IsInteractive)
{
    <script>
        // 仅在交互式模式下执行的脚本
        console.log("当前为交互式渲染，脚本加载");
        // 初始化逻辑
    </script>
}

IsInteractive是.NET 8 Blazor组件自带的属性，用来判断当前是否处于交互式渲染模式。

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