.NET 8 Blazor Server引入blazor.server.js致自定义JS失效求助

问题根源 #

你使用的ServerPrerendered渲染模式会先完成页面预渲染，此时自定义JS会执行并绑定事件、初始化实例，但Blazor建立SignalR连接完成后，会替换整个DOM内容，之前绑定的JS逻辑全部失效，页面闪烁正是DOM替换导致的。

正确加载方案 #

1. 调整脚本顺序并利用Blazor启动事件 #

把自定义JS移到blazor.server.js之后，通过Blazor的afterStarted事件触发JS初始化，确保DOM替换完成后再执行逻辑：

修改你的_Layout.cshtml：

<base href="~/" />

<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    @RenderBody()

    <!-- 先加载Blazor核心脚本 -->
    <script src="_framework/blazor.server.js"></script>

    <!-- 再加载自定义JS文件 -->
    <script src="js/test/custom.js"></script>
    <script src="js/test/swiper.js"></script>
    <script src="js/test/gallery.js"></script>
    <script src="js/test/Pager.js"></script>
    <script src="js/test/picture.js"></script>
    <script src="js/main.js"></script>

    <!-- 监听Blazor启动完成事件，初始化JS逻辑 -->
    <script>
        Blazor.start({
            afterStarted: () => {
                // 调用自定义JS中暴露的初始化函数
                window.initSwiper?.();
                window.initGallery?.();
                window.initCustomJS?.();
                // 其他需要初始化的函数依次调用
            }
        });
    </script>
</body>

2. 改造自定义JS为可调用函数 #

把原来在DOMContentLoaded里的初始化逻辑抽成全局函数，比如修改main.js：

// 暴露全局初始化函数
window.initSwiper = function() {
    // 初始化Swiper的逻辑
    new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        // 其他配置
    });
};

window.initCustomJS = function() {
    // 其他自定义交互逻辑，比如绑定点击事件等
    document.querySelector('.some-element')?.addEventListener('click', () => {
        // 处理逻辑
    });
};

3. 动态组件的补充处理 #

如果页面有动态加载的组件（比如路由切换、条件渲染），仅靠全局初始化可能不够，需要在组件的OnAfterRenderAsync中触发对应JS逻辑：

@inject IJSRuntime JS

@* 组件内容 *@

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 调用对应初始化函数
            await JS.InvokeVoidAsync("initSwiper");
        }
    }
}

为什么放在页面文件里正常？ #

因为页面是Blazor组件，组件渲染完成后（OnAfterRender阶段）执行的JS，是在Blazor DOM替换完成后触发的，所以不会被后续的DOM更新覆盖。

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