Blazor Server 与 JavaScript 交互主要靠 JS Interop（JavaScript 互操作），核心是通过
IJSRuntime实例调用 JS 函数，或在 JS 中调用 .NET 方法。关键点在于：服务端渲染、信号连接、序列化限制、生命周期同步——不是所有前端 JS 模式都直接适用。
从 C# 调用 JavaScript 函数
这是最常用场景。需确保 JS 函数挂载在全局对象（如
window）上，且在 Blazor 组件中注入
IJSRuntime。 在
wwwroot/index.html的 或 底部添加 JS 函数（推荐用 IIFE 避免污染全局）：
<script><br> <a style="color:#f60; text-decoration:underline;" title= "win" href="https://www.php.cn/zt/19041.html" target="_blank">window.myUtils = {<br> showAlert: (msg) => alert(msg),<br> getElementWidth: (selector) => document.querySelector(selector)?.offsetWidth || 0<br> };<br> </script> 在 Razor 组件中调用（支持同步/异步）：
@inject IJSRuntime JSRuntime
@code {
private async Task ShowMessage() => await JSRuntime.InvokeVoidAsync("myUtils.showAlert", "Hello from Blazor!");
private async Task
}
InvokeVoidAsync和
InvokeAsync<t></t>都走 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的
<assemblyname></assemblyname>中确认。
处理 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 互操作不复杂但容易忽略信号延迟和序列化边界，把数据当“消息”而非“对象”来设计，会更稳。
