Blazor Server页面集成输出内容类远程JS脚本的方法

针对在Blazor Server的Razor组件中间位置加载远程JS脚本（如CookieBot的声明脚本）的需求，推荐以下两种可行方案：

方案一：通过JSInterop动态插入脚本（推荐） #

这种方式可以精准控制脚本插入的位置，适配Blazor的DOM生命周期，避免重复加载问题。

步骤1：编写自定义JS辅助函数 #

在wwwroot/js目录下创建remoteScriptLoader.js，内容如下：

window.loadRemoteScript = (targetElementId, scriptUrl, scriptId) => {
    const target = document.getElementById(targetElementId);
    if (!target) return;

    // 检查脚本是否已加载，避免重复注入
    if (document.getElementById(scriptId)) return;

    const script = document.createElement('script');
    script.id = scriptId;
    script.src = scriptUrl;
    script.type = 'text/javascript';
    script.async = true;

    target.appendChild(script);
};

步骤2：在Razor组件中调用 #

在需要展示内容的组件中，注入IJSRuntime并在组件渲染完成后执行脚本加载：

@inject IJSRuntime JS

<!-- 组件中间的目标容器，脚本生成的内容会插入到这里 -->
<div id="CookieDeclarationContainer" class="my-4"></div>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 调用自定义JS函数加载远程脚本
            await JS.InvokeVoidAsync(
                "window.loadRemoteScript",
                "CookieDeclarationContainer",
                "https://consent.cookiebot.com/0000-000-000/cd.js",
                "CookieDeclaration"
            );
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

方案二：静态渲染场景下直接使用MarkupString #

如果你的组件是静态渲染模式（未启用交互式渲染），可以直接通过MarkupString渲染原生<script>标签：

@* 仅适用于静态渲染的组件，交互式组件中可能因DOM diff导致异常 *@
<div class="my-4">
    @((MarkupString)@"<script id=""CookieDeclaration"" src=""https://consent.cookiebot.com/0000-000-000/cd.js"" type=""text/javascript"" async></script>")
</div>

注意事项 #

• 确保远程脚本的CORS策略允许你的域名加载，否则会出现跨域错误。
• CookieBot这类脚本会自动生成DOM内容，需确保目标容器的位置符合页面布局需求。
• 交互式组件中优先使用方案一，避免Blazor的DOM更新机制干扰脚本加载。

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