.NET 8 Blazor（自动模式）JSInterop隔离无法找到JS函数

核心问题分析 #

Blazor Auto模式混合了Server与WASM的路由机制，页面导航时会触发组件卸载/重建，直接挂载window的JS函数或一次性导入的模块可能因作用域失效、引用丢失导致调用失败。以下是针对性的解决步骤：

1. 改用ES模块动态导入+Scoped服务封装 #

避免直接挂载window，用动态导入模块的方式确保每次组件加载时JS引用有效，同时将JSInterop服务注册为Scoped（匹配组件生命周期）。

步骤1：重构NotificationsJsInteropService

using Microsoft.JSInterop;

public class NotificationsJsInteropService : IAsyncDisposable
{
    private readonly IJSRuntime _jsRuntime;
    private IJSObjectReference? _module;

    public NotificationsJsInteropService(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    // 延迟加载模块，确保每次调用前模块已就绪
    private async Task EnsureModuleLoaded()
    {
        if (_module == null)
        {
            _module = await _jsRuntime.InvokeAsync<IJSObjectReference>(
                "import", "./notifications.js"); // 路径对应wwwroot下的文件
        }
    }

    public async Task ShowErrorToast(string message)
    {
        await EnsureModuleLoaded();
        await _module!.InvokeVoidAsync("showErrorToast", message);
    }

    // 释放模块引用，避免内存泄漏
    public async ValueTask DisposeAsync()
    {
        if (_module != null)
        {
            await _module.DisposeAsync();
        }
    }
}

步骤2：注册Scoped服务（Program.cs）

builder.Services.AddScoped<NotificationsJsInteropService>();

2. 调整JS文件为ES模块格式 #

将wwwroot/notifications.js改为导出函数的格式：

export function showErrorToast(message) {
    // 示例：Bootstrap Toast实现
    const toastEl = document.getElementById('errorToast');
    if (!toastEl) return;
    
    const toast = new bootstrap.Toast(toastEl);
    toastEl.querySelector('.toast-body').textContent = message;
    toast.show();
}

3. 布局中固定全局JS依赖元素 #

将Toast等需要全局存在的DOM元素放在MainLayout中，避免导航后元素被销毁：

@inherits LayoutComponentBase
@inject NotificationsJsInteropService NotificationsService

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

<!-- 全局Toast容器，放在布局中确保始终存在 -->
<div id="errorToast" class="toast position-fixed top-0 end-0 m-3" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <strong class="me-auto">错误提示</strong>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body"></div>
</div>

4. 组件中调用示例 #

@inject NotificationsJsInteropService NotificationsService

<button class="btn btn-danger" @onclick="TriggerErrorToast">触发错误提示</button>

@code {
    private async Task TriggerErrorToast()
    {
        await NotificationsService.ShowErrorToast("导航后JSInterop测试成功");
    }
}

关键注意事项 #

• 确保JS文件路径正确：./notifications.js对应wwwroot/notifications.js，不要遗漏前缀
• 禁止在单例服务中持有IJSObjectReference，单例生命周期长于用户会话，会导致引用失效
• 若使用第三方UI库（如Bootstrap），需确保库的JS已提前加载（可在_Host.cshtml/index.html中用defer加载）

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