Blazor中从C#调用JS函数提示找不到函数的问题求助

问题原因分析 #

出现Could not find 'my_function' ('my_function' was undefined)错误，通常是因为JS函数未挂载到全局作用域、脚本加载顺序错误、调用时机过早或资源路径配置不当导致。

具体解决步骤 #

1. 将JS函数挂载到全局window对象

普通脚本中的函数可能因作用域问题无法被Blazor识别，显式挂载到window确保全局可访问：

window.my_function = function(message) {
    console.log("Message: " + message);
};

2. 调整脚本加载顺序

将自定义JS脚本放在blazor.webassembly.js之前加载，确保Blazor初始化时全局函数已存在：

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="JS/example.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

3. 确保在正确的生命周期调用函数

避免在组件初始化阶段（如OnInitializedAsync）调用JS函数，此时JS环境可能未完全准备好。改用OnAfterRenderAsync，确保DOM和JS环境已就绪：

@inject IJSRuntime js

@code
{
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await js.InvokeVoidAsync("my_function", "Custom message");
        }
    }
}

4. 验证静态资源路径

确认JS/example.js位于项目的wwwroot目录下，Blazor WASM默认从该目录读取静态资源。若路径不符，需调整脚本引用路径或移动文件位置。

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