MAUI Blazor中BlazorWebView内容的非JSInterop刷新方案问询

以下是几种无需依赖JSInterop的刷新方法，适用于触发特定条件后重新加载BlazorWebView内容的场景：

1. 调用平台原生WebView的刷新方法 #

BlazorWebView在各平台会封装对应的原生WebView控件，通过MAUI的Handler可以获取到原生实例，直接调用其刷新API：

代码实现（MAUI页面后台） #

首先在XAML中给BlazorWebView命名：

<BlazorWebView x:Name="MainBlazorWebView" HostPage="wwwroot/index.html">
    <BlazorWebView.RootComponents>
        <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
    </BlazorWebView.RootComponents>
</BlazorWebView>

然后在页面的代码文件中实现刷新方法：

public void TriggerWebViewRefresh()
{
    var handler = MainBlazorWebView.Handler;
    if (handler == null) return;

    #if ANDROID
        var androidWebView = handler.PlatformView as Android.Webkit.WebView;
        androidWebView?.Reload();
    #elif IOS || MACCATALYST
        var wkWebView = handler.PlatformView as WebKit.WKWebView;
        wkWebView?.Reload();
    #elif WINDOWS
        var webView2 = handler.PlatformView as Microsoft.UI.Xaml.Controls.WebView2;
        _ = webView2?.ReloadAsync();
    #endif
}

此方法直接操作原生控件，刷新效率最高，适合需要完全重启WebView内容的场景。

2. 重置HostPage触发重新加载 #

通过临时修改BlazorWebView的HostPage属性，先设为null再恢复原路径，强制组件重新加载内容：

代码实现 #

private string _originalHostPage;

protected override void OnAppearing()
{
    base.OnAppearing();
    _originalHostPage = MainBlazorWebView.HostPage;
}

public void RefreshViaHostPageReset()
{
    if (string.IsNullOrEmpty(_originalHostPage)) return;
    
    MainBlazorWebView.HostPage = null;
    MainBlazorWebView.HostPage = _originalHostPage;
}

这种方法无需平台特定代码，跨平台兼容性好，但部分平台可能会出现短暂的空白加载状态，需根据UI需求评估。

3. 利用Blazor NavigationManager强制刷新路由 #

如果仅需刷新Blazor组件内容而非整个WebView，可在Blazor组件中注入NavigationManager，调用强制刷新当前路由的方法：

代码实现（Blazor组件内） #

@inject NavigationManager NavManager

@* 示例：30秒后自动刷新 *@
@code {
    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(30000);
        NavManager.NavigateTo(NavManager.Uri, forceLoad: true);
    }
}

forceLoad: true参数会绕过Blazor的客户端路由缓存，强制重新加载当前页面的所有组件，属于Blazor框架原生能力，完全无需依赖JS。

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