Blazor WebAssembly中Window.visiblityStatus/Window.hidden的等价方案是什么？

目前Blazor WebAssembly没有官方原生封装对应浏览器的visibilityState或hidden特性，常用实现方式是通过**JS互操作（JSInterop）**直接调用浏览器原生API：

1. 获取页面可见性状态 #

获取 visibilityState #

在C#中通过JSInterop调用浏览器的document.visibilityState：

@inject IJSRuntime JSRuntime

@code {
    private async Task<string> GetVisibilityState()
    {
        return await JSRuntime.InvokeAsync<string>("eval", "document.visibilityState");
    }
}

获取 hidden 状态 #

同理调用document.hidden获取布尔值：

private async Task<bool> IsPageHidden()
{
    return await JSRuntime.InvokeAsync<bool>("eval", "document.hidden");
}

2. 监听页面可见性变化事件 #

若需要监听visibilitychange事件，可通过JSInterop注册事件并回调Blazor方法：

@implements IAsyncDisposable
@inject IJSRuntime JSRuntime

@code {
    private DotNetObjectReference<YourComponent>? _objRef;

    protected override async Task OnInitializedAsync()
    {
        _objRef = DotNetObjectReference.Create(this);
        await JSRuntime.InvokeVoidAsync("registerVisibilityChange", _objRef);
    }

    [JSInvokable]
    public void OnVisibilityChanged()
    {
        // 页面可见性变化时的逻辑处理
    }

    public async ValueTask DisposeAsync()
    {
        if (_objRef != null)
        {
            await JSRuntime.InvokeVoidAsync("unregisterVisibilityChange", _objRef);
            _objRef.Dispose();
        }
    }
}

对应的JavaScript代码（可放在wwwroot/index.html中）：

function registerVisibilityChange(dotNetRef) {
    document.addEventListener('visibilitychange', () => {
        dotNetRef.invokeMethodAsync('OnVisibilityChanged');
    });
}

function unregisterVisibilityChange(dotNetRef) {
    document.removeEventListener('visibilitychange', () => {
        dotNetRef.invokeMethodAsync('OnVisibilityChanged');
    });
}

官方支持进度 #

你提到的2021年相关官方议题已被移至Backlog里程碑，意味着官方暂无近期推出原生封装的计划，目前仍需依赖JS互操作实现该功能。

内容的提问来源于stack exchange，提问作者Node.JS