Blazor WebAssembly通过IJSRuntime实现JS互操作，需注入服务并确保脚本加载；2. 可调用全局函数或模块化JS，支持传参、返回值及对象序列化；3. 注意异步调用、错误处理与资源释放。
在 Blazor WebAssembly 中调用 JavaScript 函数是实现与前端 DOM 操作、第三方 JS 库集成的关键方式。Blazor 提供了内置的 JS 互操作（JavaScript Interop）机制，让你能在 C# 代码中安全地调用 JavaScript，并支持传参和返回值。
启用 JS 互操作的基本步骤
Blazor WebAssembly 允许你在 .NET 代码中通过 IJSRuntime 接口调用 JavaScript 函数。你需要注入该服务，并确保 JS 脚本已加载。
在组件中获取 IJSRuntime 实例：
- @inject IJSRuntime JS
然后就可以使用 JS.InvokeAsync 方法来调用全局定义的 JS 函数或直接执行脚本片段。
立即学习“Java免费学习笔记（深入）”；
定义并调用简单的 JavaScript 函数
在 wwwroot/index.html 的
在 Razor 组件中调用这些函数：
- await JS.InvokeVoidAsync("showAlert", "Hello from C#");
- var width = await JS.InvokeAsync
("getScreenWidth");
InvokeVoidAsync 用于没有返回值的函数，InvokeAsync
处理复杂参数和对象传递
你可以将 C# 对象传给 JavaScript，Blazor 会自动序列化为 JSON。例如：
// C#
var person = new { Name = "张三", Age = 25 };
await JS.InvokeVoidAsync("logPerson", person);
// JavaScript
window.logPerson = (person) => {
console.log(person.name, person.age); // 输出：张三 25
};
注意：C# 属性名会转为小驼峰格式（Name → name），除非你自定义序列化设置。
异步调用与错误处理
JS 调用是异步的，应始终使用 await 并包裹在 try-catch 中防止崩溃：
try {
var result = await JS.InvokeAsync("someFunction");
} catch (JSException ex) {
Console.Error.WriteLine($"JS 调用失败: {ex.Message}");
}
常见错误包括函数未定义、脚本未加载完成、跨域限制等。确保 JS 函数挂载到 window 上且页面已完全加载后再调用。
模块化 JS 调用（推荐做法）
对于大型项目，建议将 JS 封装成模块，避免污染全局作用域：
// wwwroot/js/helper.js
export function showAlert(message) {
alert(message);
}
export function readLocalStorage(key) {
return localStorage.getItem(key);
}
在组件中动态导入模块并调用：
var module = await JS.InvokeAsync("import", "./js/helper.js"); await module.InvokeVoidAsync("showAlert", "模块化调用！"); var value = await module.InvokeAsync ("readLocalStorage", "token"); await module.DisposeAsync(); // 释放引用
模块化方式更清晰，支持 Tree-shaking，也便于管理生命周期。
基本上就这些。只要正确引入 IJSRuntime、定义好 JS 函数、注意异步和序列化规则，就能顺畅实现 Blazor WebAssembly 与 JavaScript 的互操作。不复杂但容易忽略细节，比如函数必须挂在 window 上或使用模块导入。
