如何在 blazor 服务器端动态注入 javascript 文件答案

【问题标题】：How to inject a javascript file dynamically in blazor server side如何在 blazor 服务器端动态注入 javascript 文件
【发布时间】：2021-09-02 10:15:34
【问题描述】：

我有一个 .js 文件，其中包含以下 javascript 代码：

         <script>     
            abc= window.abc|| {};
            abc.Metrics = abc.Metrics || {};
            abc.Metrics.sc = abc.Metrics.sc || {};
            abc.Metrics.sc.country = "us";         /***dynamic value based on site***/
            abc.Metrics.sc.language = "en";        /***dynamic value based on site***/
            abc.Metrics.sc.segment = "corp";      /***dynamic value based on site***/
            abc.Metrics.sc.customerset = "19";    /***dynamic value based on site***/
            abc.Metrics.sc.cms = "stp";           /***dynamic value based on site***/
            abc.Metrics.sc.pagename = "pname";  /***relevant unique page name***/
            abc.Metrics.sc.applicationname = "Browse:Product Detail"; 
         
        </script>
      
      <!-- Refer the below script in DEV -->
      <script src="//gbxDev/Bootstrap.js"></script>

现在，我想从 .cs 文件中注入这段代码，而不在 _Host.cshtml 中添加这个 js 文件的引用。此外，我必须在启动时动态设置这些变量值。在 blazor 服务器端可以吗？

【问题讨论】：

您想将此配置脚本添加到所有页面还是仅部分页面？
我希望在所有页面上都使用此配置脚本，但希望将动态值动态注入到变量中。

标签： blazor blazor-server-side

【解决方案1】：

您可以通过这种方式动态添加任何js文件：

@code {   
 protected override async void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync(identifier: "import", "/js/yourfile.js");
        }
    }
}

上面的代码只是让你调用。如果你想用你想发送的初始值调用。你应该这样做：

@code {   
 protected override async void OnAfterRender(bool firstRender)
    {
        String parameter1 = "test";
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync(identifier: "yourMethodName", parameter1);
        }
    }
}

JS 文件端

window.yourMethodName= (parameter) => { *** }

*你必须在_host.cshtml中添加这个js文件

【讨论】：