Blazor WebAssembly中DOM就绪后运行脚本及调用报错的问题求助

我来帮你搞定这个Blazor WebAssembly里主题脚本初始化的问题，咱们一步步拆解修复：

问题根源分析 #

1. DOM就绪时机不匹配：你原来用jQuery(document).ready()调用Layout1.init()时，Blazor还没开始渲染组件——此时<app>标签里只有"Loading..."文本，那些需要绑定事件的DOM元素（比如.sidebar-compact-switch）还没被Blazor生成，自然找不到元素导致事件监听失效。
2. JSRuntime调用语法错误：你后来用JSRuntime.InvokeVoidAsync("Layout1.init()")的写法不对，这个方法的第一个参数是全局函数的路径字符串，不需要加括号，加括号会被当成普通字符串解析，导致找不到对应的函数。

具体修复步骤 #

1. 调整脚本加载顺序 #

先修改你的index.html，把Blazor核心脚本放在最前面，确保主题相关脚本在Blazor之后加载，同时保留autostart="false"（我们会在合适时机手动启动Blazor）：

<body>
    <app>Loading...</app>
    <!-- Blazor脚本优先加载 -->
    <script src="_framework/blazor.webassembly.js" autostart="false"></script>
    <!-- 主题相关脚本按顺序加载 -->
    <script src="assets/js/vendors.bundle.min.js"></script>
    <script src="assets/js/main.bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
    <script src="assets/js/pages/doc.script.min.js"></script>
</body>

2. 修正MainLayout中的JSRuntime调用 #

在MainLayout.razor里，调整OnAfterRenderAsync的代码，注意函数名的正确写法（去掉括号），同时确保只在首次渲染完成后执行初始化：

@inject IJSRuntime JSRuntime

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 正确写法：直接传全局函数名称，不需要括号
            await JSRuntime.InvokeVoidAsync("Layout1.init");
            // 手动启动Blazor
            await JSRuntime.InvokeVoidAsync("Blazor.start");
        }
    }
}

3. 确保Layout1是全局对象 #

检查你的main.bundle.js，确认Layout1对象被挂载到window全局作用域上，否则JSRuntime无法找到它。示例写法如下：

// main.bundle.js中确保Layout1是全局可访问的
window.Layout1 = {
    init: function() {
        // 此时DOM已就绪，能正确找到目标元素
        var $sidebarCompactToggle = $(".sidebar-compact-switch");
        // 绑定事件等初始化逻辑
        $sidebarCompactToggle.on("click", function() {
            // 你的事件处理代码
        });
    }
};

// 移除原来的jQuery ready和Blazor.start()代码，改由Blazor组件生命周期触发

为什么这样有效？ #

• OnAfterRenderAsync是Blazor组件生命周期中DOM完全更新完成后才触发的方法，firstRender确保只执行一次初始化，此时Blazor已经渲染了所有初始组件的DOM元素，Layout1.init()里的选择器能精准找到目标元素。
• 修正JSRuntime的调用语法后，能正确识别全局的Layout1.init函数，避免"找不到函数"的报错。

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