Blazor Server应用无法通过JS互操作调整DIV位置与尺寸问题求助

问题核心原因梳理 #

你遇到的问题是多个错误写法共同导致的，按优先级修正如下：

1. 生命周期方法调用逻辑错误 #

• 你手动在OnInitializedAsync/OnInitialized中调用OnAfterRenderAsync/OnAfterRender属于严重错误：Blazor的生命周期方法由框架自动调度，手动调用会导致逻辑在错误的时机执行。预渲染阶段OnInitialized系列方法会在服务端静态渲染时执行，此时没有和浏览器建立连接，完全不支持JS互操作，就是这个错误触发了静态渲染阶段调用JS的报错。
• OnAfterRenderAsync中错误调用了base.OnInitializedAsync，应该调用对应生命周期的基类方法base.OnAfterRenderAsync(firstRender)。

2. 异步方法同步等待导致死锁 #

所有使用.Result/.Wait()获取异步方法返回值的写法都会在Blazor的单线程同步上下文中造成死锁，必须全程使用await调用异步方法。

3. 多余逻辑和错误API调用 #

• SetDimensions方法中不需要套Task.Run，也不需要手动调用任何生命周期方法。
• 原生JS中没有window.width/window.height属性，属于错误写法。
• Blazor JS互操作会自动序列化JS返回对象，不需要手动调用JSON.stringify。

完整修正步骤 #

步骤1：修正组件生命周期逻辑 #

删除所有手动调用生命周期方法的代码，仅保留框架自动触发的实现：

// 完全删除你自己写的手动调用OnAfterRender的OnInitialized/OnInitializedAsync方法
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    // 调用对应生命周期的基类方法
    await base.OnAfterRenderAsync(firstRender);
    if (firstRender)
    {
        await SetDimensions();
        StateHasChanged();
    }
}

步骤2：修正SetDimensions方法实现 #

// 定义接收窗口尺寸的实体类
public class WindowSize
{
    public int Width { get; set; }
    public int Height { get; set; }
}

private async Task SetDimensions()
{
    // 直接调用JS，不需要Task.Run，也不需要传空参数
    WindowSize windowSize = await JSRuntime.InvokeAsync<WindowSize>("getMyWindow");
    TotalWidth = windowSize.Width;
    TotalHeight = windowSize.Height;
    // 后续处理Device的坐标、尺寸逻辑写在这里
}

步骤3：修正JS方法实现 #

function getMyWindow() {
    // 直接返回对象，Blazor会自动处理序列化，不需要手动转JSON
    return {
        // 视口宽高用window.innerWidth/window.innerHeight，要屏幕分辨率则用screen.width/screen.height
        width: window.innerWidth,
        height: window.innerHeight
    };
}

步骤4：（可选）关闭预渲染 #

如果你的项目不需要SEO优化，可以直接关闭预渲染彻底避免这类问题：修改Pages/_Host.cshtml文件，把render-mode="ServerPrerendered"改为render-mode="Server"即可。

内容的提问来源于stack exchange，提问作者Ken Tola