Blazor Server端如何动态注入JavaScript文件并设置启动动态参数

Blazor Server完全可以实现该需求，不需要修改_Host.cshtml添加静态脚本引用，所有逻辑可以在.cs文件中实现，同时支持应用启动时动态设置变量值，具体方案如下：

实现步骤 #

1. 定义配置类存储动态变量 #

先创建一个配置类，用来存放你需要动态赋值的Metrics参数：

public class MetricsConfig
{
    public string Country { get; set; } = "us";
    public string Language { get; set; } = "en";
    public string Segment { get; set; } = "corp";
    public string CustomerSet { get; set; } = "19";
    public string Cms { get; set; } = "stp";
    public string PageName { get; set; } = "pname";
    public string ApplicationName { get; set; } = "Browse:Product Detail";
    public bool IsDevEnv { get; set; }
}

2. 应用启动时加载动态配置 #

在Program.cs中注册配置类，从配置源（appsettings.json、环境变量、启动参数等均可）读取动态值完成初始化：

// 读取配置给MetricsConfig赋值
var metricsConfig = new MetricsConfig
{
    Country = builder.Configuration["Metrics:Country"] ?? "us",
    Language = builder.Configuration["Metrics:Language"] ?? "en",
    Segment = builder.Configuration["Metrics:Segment"] ?? "corp",
    CustomerSet = builder.Configuration["Metrics:CustomerSet"] ?? "19",
    Cms = builder.Configuration["Metrics:Cms"] ?? "stp",
    PageName = builder.Configuration["Metrics:PageName"] ?? "pname",
    ApplicationName = builder.Configuration["Metrics:ApplicationName"] ?? "Browse:Product Detail",
    IsDevEnv = builder.Environment.IsDevelopment()
};
// 注册为单例服务，全局可用
builder.Services.AddSingleton(metricsConfig);

你可以在不同环境的appsettings.json里配置不同的参数值，应用启动时会自动加载对应环境的配置。

3. 全局注入JS脚本 #

在全局布局文件MainLayout.razor中注入IJSRuntime和配置类，在页面首次渲染完成后动态执行JS代码、加载外部脚本：

@inject IJSRuntime JsRuntime
@inject MetricsConfig Config

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 拼接动态JS配置代码
            var metricsJs = $@"
                window.abc = window.abc || {{}};
                abc.Metrics = abc.Metrics || {{}};
                abc.Metrics.sc = abc.Metrics.sc || {{}};
                abc.Metrics.sc.country = '{Config.Country}';
                abc.Metrics.sc.language = '{Config.Language}';
                abc.Metrics.sc.segment = '{Config.Segment}';
                abc.Metrics.sc.customerset = '{Config.CustomerSet}';
                abc.Metrics.sc.cms = '{Config.Cms}';
                abc.Metrics.sc.pagename = '{Config.PageName}';
                abc.Metrics.sc.applicationname = '{Config.ApplicationName}';
            ";
            // 执行JS配置代码
            await JsRuntime.InvokeVoidAsync("eval", metricsJs);

            // 动态加载Bootstrap.js
            var scriptSrc = Config.IsDevEnv ? "//gbxDev/Bootstrap.js" : "生产环境对应的Bootstrap.js地址";
            await JsRuntime.InvokeVoidAsync(@"async (src) => {
                const scriptTag = document.createElement('script');
                scriptTag.src = src;
                document.head.appendChild(scriptTag);
                // 等待脚本加载完成再返回，避免后续依赖报错
                return new Promise((resolve, reject) => {
                    scriptTag.onload = resolve;
                    scriptTag.onerror = reject;
                });
            }", scriptSrc);
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

注意事项 #

• 拼接JS字符串时如果参数包含单引号、换行符等特殊字符，需要先做转义处理，避免出现JS语法错误
• 如果需要每个页面单独设置pagename参数，可以在对应页面的OnAfterRenderAsync生命周期中调用JS直接修改abc.Metrics.sc.pagename的值即可，不需要重复注入整个脚本
• 如果需要脚本在页面加载更早阶段执行，也可以通过自定义中间件修改HTML响应内容的方式注入，不需要修改_Host.cshtml文件

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