如何在 Blazor 服务器端动态注入 JavaScript 文件

Question

我有一个 .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 服务器端可以吗？

Answer 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文件