如何在Blazor中通过JSRuntime获取客户端浏览器User Agent？

Blazor Server运行在服务器端，无法直接访问客户端浏览器信息，可通过以下两种常用方式获取UserAgent：

1. 初始请求时通过HttpContext获取 #

Blazor应用启动时的首次HTTP请求可直接从HttpContext中读取UserAgent，适合首次加载时记录或初始化决策：

• 第一步：在Program.cs中注册IHttpContextAccessor服务：

builder.Services.AddHttpContextAccessor();

• 第二步：在组件中注入并获取UserAgent：

@inject IHttpContextAccessor HttpContextAccessor

@code {
    private string initialUserAgent;

    protected override void OnInitialized()
    {
        initialUserAgent = HttpContextAccessor.HttpContext?.Request.Headers["User-Agent"].ToString();
        // 此处可记录日志或执行初始化决策逻辑
    }
}

注意：仅首次渲染时HttpContext可用，后续SignalR交互阶段HttpContext为null，此方法仅适用于初始场景。

2. 通过JavaScript互操作获取（全场景适用） #

对于后续交互过程中需要获取UserAgent的场景，需通过JS调用浏览器的navigator.userAgent接口：

• 第一步：在wwwroot/js目录下创建browserUtils.js文件，添加以下代码：

window.getBrowserUserAgent = () => {
    return navigator.userAgent;
};

• 第二步：在Pages/_Host.cshtml的body末尾引入该JS文件：

<script src="~/js/browserUtils.js"></script>

• 第三步：在Blazor组件中注入IJSRuntime并调用JS方法：

@inject IJSRuntime JSRuntime

<p>当前浏览器UserAgent：@userAgent</p>

@code {
    private string userAgent;

    protected override async Task OnInitializedAsync()
    {
        userAgent = await JSRuntime.InvokeAsync<string>("getBrowserUserAgent");
        // 示例：根据UserAgent判断是否为移动端
        bool isMobile = System.Text.RegularExpressions.Regex.IsMatch(
            userAgent, 
            @"Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini", 
            System.Text.RegularExpressions.RegexOptions.IgnoreCase
        );
    }
}

场景选型建议 #

• 若仅需在应用启动时记录或初始化设备信息，优先使用HttpContext方法，无需额外JS依赖；
• 若需要在用户交互过程中动态获取UserAgent（比如用户切换设备后重新判断），则使用JS互操作方法。

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