Blazor 怎么调用 JavaScript 函数
Blazor通过IJSRuntime调用JavaScript函数，支持Blazor Server和WebAssembly两种场景；推荐使用JS隔离模块（如import "./js/myModule.js"）而非全局window函数，以提升安全性和可维护性。
Blazor 调用 JavaScript 函数主要通过 IJSRuntime 实现，分服务端（Blazor Se
rver）和客户端（Blazor WebAssembly）两种场景，核心方式一致，但细节略有不同。
使用 IJSRuntime 调用 JS 函数
在 Razor 组件或 C# 服务中注入 IJSRuntime，然后调用 InvokeAsync 或 InvokeVoidAsync：
-
InvokeAsync：用于有返回值的 JS 函数，("函数名", args...) T是期望的返回类型（如string、int、bool，或自定义类） -
InvokeVoidAsync("函数名", args...)：用于无返回值的 JS 函数（如触发弹窗、修改 DOM）
示例（C#）：
@inject IJSRuntime JSRuntime@code { private async Task ShowAlert() { await JSRuntime.InvokeVoidAsync("alert", "Hello from Blazor!"); }
private async TaskGetUserName() { return await JSRuntime.InvokeAsync ("getUserName"); } }
在 JS 中定义可被调用的函数
Blazor 默认只能调用挂载在全局
window上的函数（WebAssembly）或通过 JS 隔离模块（推荐方式）。不建议直接写window.myFunc = ...，而应使用 JS 隔离（JS Isolation）提升安全性和可维护性。
- 新建
wwwroot/js/myModule.js，导出函数：
export function showAlert(message) {
alert(message);
}
export function getUserName() {
return "Alice";
}
- 在组件中加载并调用：
@inject IJSRuntime JSRuntime@code { private IJSObjectReference? module;
protected override async Task OnInitializedAsync() { module = await JSRuntime.InvokeAsync( "import", "./js/myModule.js"); } private async Task CallJsFunction() { await module.InvokeVoidAsync("showAlert", "Hi there!"); var name = await module.InvokeAsync ("getUserName"); } }
注意跨平台兼容性与生命周期
Blazor Server 和 WebAssembly 对 JS 互操作的支持基本一致，但要注意：
- Blazor Server 中 JS 调用是“远程”执行（通过 SignalR），延迟略高；WebAssembly 是本地执行，更快但受限于浏览器沙箱
- JS 模块必须在组件渲染后加载（通常放在
OnInitializedAsync或OnAfterRenderAsync中），避免module为 null - 调用异步 JS 函数时，务必
await，否则可能引发未定义行为或状态错乱 - 不要在 JS 中直接操作 Blazor 渲染的 DOM 元素（如用
document.getElementById修改），应通过ElementReference+JS Interop安全交互
常见问题快速处理
遇到调用失败？检查这几项：
- JS 函数名拼写是否完全一致（区分大小写）
- JS 文件是否正确引入（WebAssembly：确认
标签或import路径；Server：确保脚本已加载到页面） - 是否在 JS 模块加载完成前就调用了函数（加
if (module != null)判断） - 参数类型是否匹配（例如 JS 返回字符串，C# 却用
int接收会抛异常） - 控制台是否有
Failed to resolve module或not defined报错
基本上就这些。用好 JS 隔离 + IJSRuntime，就能安全、清晰地桥接 Blazor 和 JavaScript。
