Blazor通过JS Interop监听window.resize事件：先在JS端注册监听器并调用.NET方法，再在C#组件中定义OnResize回调更新状态并重渲染。
Blazor 本身不直接提供内置的 window.resize 事件绑定机制，但可以通过 JavaScript 互操作（JS Interop）监听浏览器窗口大小变化，并把尺寸数据传回 C# 组件。整个过程分三步：注册 JS 监听器、定义回调方法、在组件中更新状态。
用 JS Interop 注册 resize 监听器
需要在 JavaScript 端设置一个监听函数，在窗口大小变化时调用 .NET 方法。推荐在 `_Host.cs
html` 或 `index.html` 的 `<script>` 中添加：
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:js;toolbar:false;'>window.blazorHelpers = {
registerResizeListener: (dotNetObjRef) => {
const handleResize = () => {
dotNetObjRef.invokeMethodAsync('OnResize',
window.innerWidth,
window.innerHeight);
};
window.addEventListener('resize', handleResize);
// 立即触发一次，确保初始尺寸正确
handleResize();
// 返回清理函数（可选，用于取消订阅）
return () => window.removeEventListener('resize', handleResize);
}
};</pre>
登录后复制
</div><H3>在 Blazor 组件中接收并响应尺寸变化
组件里需定义：
- 两个字段存宽高（如 `<a style="color:#f60; text-decoration:underline;" title= "win"href="https://www.php.cn/zt/19041.html" target="_blank">windowWidth`, `windowHeight`）
- 一个 `IDisposable` 引用（便于后续取消监听）
- `[JSInvokable]` 方法 `OnResize` 接收 JS 调用
- 调用 `StateHasChanged()` 触发重渲染
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:razor;toolbar:false;'>@page "/resize-demo"
@inject IJSRuntime JSRuntime
<p>当前宽度: @windowWidth</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/ai/895">
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679995460121.png" alt="晓象AI资讯阅读神器">
</a>
<div class="aritcle_card_info">
<a href="/ai/895">晓象AI资讯阅读神器</a>
<p>晓象-AI时代的资讯阅读神器</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="晓象AI资讯阅读神器">
<span>72</span>
</div>
</div>
<a href="/ai/895" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="晓象AI资讯阅读神器">
</a>
</div>
<p>当前高度: @windowHeight</p>
<button @onclick="StartListening">开始监听</button>
<button @onclick="StopListening">停止监听</button>
@code {
private int windowWidth;
private int windowHeight;
private IDisposable? resizeListener;
private async Task StartListening()
{
if (resizeListener is null)
{
resizeListener = await JSRuntime.InvokeUnmarshalled<IDisposable>(
"blazorHelpers.registerResizeListener",
DotNetObjectReference.Create(this));
}
}
private void StopListening()
{
resizeListener?.Dispose();
resizeListener = null;
}
[JSInvokable]
public void OnResize(int width, int height)
{
windowWidth = width;
windowHeight = height;
StateHasChanged();
}
}</pre>
登录后复制
</div><H3>注意几个关键细节
- 不要用 `InvokeAsync` 调用 `registerResizeListener`，它返回的是 JS 函数，而 `InvokeUnmarshalled` 更适合这种无 Promise 的同步注册场景
- 初始尺寸必须手动触发一次（比如在 `handleResize()` 里），否则组件首次加载时宽高为 0
- `DotNetObjectReference.Create(this)` 需要手动 `Dispose()`，否则可能引发内存泄漏；建议在 `Dispose(bool)` 中也做清理
- 如果只是做<a style="color:#f60; text-decoration:underline;" title= "响应式布局"href="https://www.php.cn/zt/23291.html" target="_blank">响应式布局判断（比如区分手机/桌面），可在 `OnResize` 里加断点逻辑，例如：
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:csharp;toolbar:false;'>public bool IsMobile => windowWidth < 768;
public string DeviceClass => IsMobile ? "mobile" : "desktop";</pre>
登录后复制
</div><p>基本上就这些。不需要引入第三方包，纯原生 Blazor + JS 互操作就能稳定工作。</script>
以上就是Blazor 怎么监听页面大小变化的详细内容，更多请关注php中文网其它相关文章！
557
收藏
