Blazor通过IJSRuntime调用JavaScript函数，支持Blazor Server和WebAssembly两种场景；推荐使用JS隔离模块（如import "./js/myModule.js"）而非全局window函数，以提升安全性和可维护性。
Blazor 调用 JavaScript 函数主要通过 IJSRuntime 实现，分服务端（Blazor Server）和客户端（Blazor WebAssembly）两种场景，核心方式一致，但细节略有不同。
使用 IJSRuntime 调用 JS 函数
在 Razor 组件或 C# 服务中注入 IJSRuntime，然后调用 InvokeAsync<t></t> 或 InvokeVoidAsync：
-
InvokeAsync<t>("函数名", args...)</t>：用于有返回值的 JS 函数，T是期望的返回类型（如string、int、bool，或自定义类） -
InvokeVoidAsync("函数名", args...)：用于无返回值的 JS 函数（如触发弹窗、修改 DOM）
示例（C#）：
@inject IJSRuntime JSRuntime
<p>@code {
private async Task ShowAlert()
{
await JSRuntime.InvokeVoidAsync("alert", "Hello from Blazor!");
}</p><pre class="brush:php;toolbar:false;">private async Task<string> GetUserName()
{
return await JSRuntime.InvokeAsync<string>("getUserName");
}}
立即学习“Java免费学习笔记（深入）”；
在 JS 中定义可被调用的函数
Blazor 默认只能调用挂载在全局 window 上的函数（WebAssembly）或通过 JS 隔离模块（推荐方式）。不建议直接写 window.myFunc = ...，而应使用 JS 隔离（JS Isolation）提升安全性和可维护性。
- 新建
wwwroot/js/myModule.js，导出函数：
export function showAlert(message) {
alert(message);
}
<p>export function getUserName() {
return "Alice";
}</p>- 在组件中加载并调用：
@inject IJSRuntime JSRuntime
<p>@code {
private IJSObjectReference? module;</p><pre class="brush:php;toolbar:false;">protected override async Task OnInitializedAsync()
{
module = await JSRuntime.InvokeAsync<IJSObjectReference>(
"import", "./js/myModule.js");
}
private async Task CallJsFunction()
{
await module.InvokeVoidAsync("showAlert", "Hi there!");
var name = await module.InvokeAsync<string>("getUserName");
}}
立即学习“Java免费学习笔记（深入）”；
注意跨平台兼容性与生命周期
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：确认
<script></script>标签或import路径；Server：确保脚本已加载到页面） - 是否在 JS 模块加载完成前就调用了函数（加
if (module != null)判断） - 参数类型是否匹配（例如 JS 返回字符串，C# 却用
int接收会抛异常） - 控制台是否有
Failed to resolve module或not defined报错
基本上就这些。用好 JS 隔离 + IJSRuntime，就能安全、清晰地桥接 Blazor 和 JavaScript。
