如何在 blazor 中获取窗口宽度

Posted 2023-03-27

【中文标题】如何在 blazor 中获取窗口宽度

【英文标题】：How to get the window width in blazor

【发布时间】：2020-02-27 00:07:43

【问题描述】：

我正在尝试获取响应式内容的窗口宽度。 谢谢！

我试过了 @code public WindowState State get; set; = WindowState.Default;

`@codeprivate Window myWindow = ?`

【问题讨论】：

使用 JS interopt 来做到这一点

您可能想查找 Ed Charbeneau 的名为 BlazorSize 的 nuget 包

我在Blagario上使用JS Interop的唯一部分

【参考方案1】：

查看此链接以获取教程 https://blazor.tips/blazor-how-to-ready-window-dimensions/

基本上你需要注册 IJSRuntime 来调用一个 JS getDimensions() 函数

using Microsoft.JSInterop;
using System.Threading.Tasks;

public class BrowserService

    private readonly IJSRuntime _js;

    public BrowserService(IJSRuntime js)
    
        _js = js;
    

    public async Task<BrowserDimension> GetDimensions()
    
        return await _js.InvokeAsync<BrowserDimension>("getDimensions");
    



public class BrowserDimension

    public int Width  get; set; 
    public int Height  get; set; 

JS 细节

<script type="text/javascript">
    window.getDimensions = function() 
        return 
                width: window.innerWidth,
                height: window.innerHeight
            ;
    ;
</script>

【讨论】：

如果 JavaScript 函数 getDimensions 不可用，因为您已导航到另一个 Blazor 页面（在 Blazor WASM 中），然后将您的 JavaScript 函数放在单独的文件中，例如getDimensions.js，并动态加载它，例如public async Task GetDimensions() await JsRuntime.InvokeAsync("import", "getDimensions.js"); return await _js.InvokeAsync("getDimensions");

【参考方案2】：

创建一个 JavaScript 文件，例如脚本/getwindowsize.js：

export function getWindowSize()

    return 
        width: window.innerWidth,
        height: window.innerHeight
    ;
;

在您的 .razor 文件中：

@inject IJSRuntime JsRuntime

Displaly the Window size: @windowWidth, @windowHeight
<button class="btn btn-primary" @onclick="OnButtonClick">Get Dimensions</button>

@code 
    private IJSObjectReference jsModule;

    public int windowHeight, windowWidth;

    public class WindowDimensions
    
        public int Width  get; set; 
        public int Height  get; set; 
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    
        if (firstRender)
        
            jsModule = await JsRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/getwindowsize.js");
        
    

    private async Task OnButtonClick()
    
        var dimension = await jsModule.InvokeAsync<WindowDimensions>("getWindowSize");
        windowHeight = dimension.Height;
        windowWidth = dimension.Width;
    

如果您更改了 getwindowsize.js 的内容（例如，如果您使用了先前答案或网站中的答案），请不要忘记告诉您浏览器进行硬重新加载并清空缓存。

这适用于 Blazor WebAssembly、.Net Core 5。