Blazor Server 通过 IJSRuntime 实现 JS 互操作，支持 C# 调 JS（需全局挂载、JSON 序列化）和 JS 调 .NET（用 JSInvokable），注意信号延迟、DOM 元素不可序列化、生命周期与内存泄漏问题。
Blazor Server 与 JavaScript 交互主要靠 JS Interop（JavaScript 互操作），核心是通过 IJSRuntime 实例调用 JS 函数，或在 JS 中调用 .NET 方法。关键点在于：服务端渲染、信号连接、序列化限制、生命周期同步——不是所有前端 JS 模式都直接适用。
从 C# 调用 JavaScript 函数
这是最常用场景。需确保 JS 函数挂载在全局对象（如 window）上，且在 Blazor 组件中注入 IJSRuntime。
- 在
wwwroot/index.html的或底部添加 JS 函数（推荐用 IIFE 避免污染全局）：
- 在 Razor 组件中调用（支持同步/异步）：
@inject IJSRuntime JSRuntime
@code {
private async Task ShowMessage() => await JSRuntime.InvokeVoidAsync("myUtils.showAlert", "Hello from Blazor!");
private async TaskGetWidth() => await JSRuntime.InvokeAsync ("myUtils.getElementWidth", "#myDiv");
} - 注意：Blazor Server 中
InvokeVoidAsync和InvokeAsync都走 SignalR 通道，返回值必须可 JSON 序列化（不支持函数、DOM 元素、Date 对象等）。
从 JavaScript 调用 .NET 方法（.NET 方法供 JS 调用）
适用于事件回调、第三方库集成（如图表、编辑器）等需要 JS 主动触发 .NET 逻辑的场景。
- 使用
JSInvokable特性标记静态或实例方法（Blazor Server 推荐用静态，避免组件实例生命周期干扰）：
public static class JsCallbacks
{ [JSInvokable] public static void OnButtonClicked(string data) { Console.WriteLine($"JS sent: {data}"); } } - 在 JS 中调用（需先获取 .NET 实例引用，Blazor Server 下通常用
DotNet.invokeMethodAsync）：
window.callDotNet = () => {
DotNet.invokeMethodAsync('MyAssemblyName', 'OnButtonClicked', 'clicked!');
}; - 装配名称（'MyAssemblyName'）是项目输出的程序集名（如
MyApp.dll→MyApp），可在.csproj的
处理 DOM 元素和引用（安全传递 ElementRef）
直接传 ElementRef 不行（不可序列化），但可通过 ElementReference.Id 或 JS 端缓存映射来间接操作。
立即学习“Java免费学习笔记（深入）”；
- 在组件中定义并绑定：
@code { private ElementRef myInput; } - JS 端不接收 ElementRef，而是用 ID 查找：
window.focusInput = (id) => {
const el = document.getElementById(id);
if (el) el.focus();
}; - C# 调用时传 ID：
await JSRuntime.InvokeVoidAsync("focusInput", "myInput"); - 更健壮的做法：用
IJSObjectReference加载模块化 JS（.NET 6+），避免全局污染，适合复杂交互。
常见问题与避坑提示
-
调用时机错误：JS 函数必须在 Blazor 渲染完成、JS 已加载后调用。推荐在
OnAfterRenderAsync或OnInitializedAsync+StateHasChanged()后延时调用，或用await JSRuntime.InvokeVoidAsync("initWidget")在 JS 初始化完成后通知 .NET。 - 跨线程/上下文丢失：Blazor Server 是单线程模型（逻辑上），但 JS 互操作回调可能跨 SignalR 消息周期，不要依赖 UI 线程局部状态（如未加锁的字段）。建议用参数传值，而非闭包捕获。
-
内存泄漏：JS 中保留对 .NET 对象的引用（如回调函数里存了组件实例）会导致 GC 无法回收。用
DotNetObjectReference.Create并手动dispose()，或改用静态回调 + 参数传递。 -
调试技巧：浏览器控制台执行
DotNet可查看可用方法；启用Microsoft.JSInterop日志级别为Debug查看序列化细节。
基本上就这些。Blazor Server 的 JS 互操作不复杂但容易忽略信号延迟和序列化边界，把数据当“消息”而非“对象”来设计，会更稳。
