Blazor中如何仅为使用特定布局的页面引用JavaScript？

问题原因 #

Blazor禁止在组件（包括布局组件）内直接添加<script>标签，核心原因是组件的DOM是动态更新的：重复渲染会导致脚本多次加载/执行，且Blazor无法跟踪脚本的加载状态，因此触发RZ9992编译错误。

实用解决方法 #

方法1：通过IJSRuntime动态加载脚本（推荐） #

利用Blazor的IJSRuntime调用JS函数按需加载脚本，确保只有布局被渲染时才加载对应JS，避免全局加载浪费资源。

修改你的SampleLayout.razor：

@inherits LayoutComponentBase
@layout MainLayoutTopNav
@inject IJSRuntime JS

<HeadContent>
    <link rel="stylesheet" href="sample.css" />
</HeadContent>

<PageTitle>Samples</PageTitle>

@Body

@code {
    private bool _scriptLoaded = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && !_scriptLoaded)
        {
            // 调用全局JS函数加载脚本
            await JS.InvokeVoidAsync("loadScript", "Sample.js");
            _scriptLoaded = true;
        }
    }
}

然后在_Layout.cshtml的<body>末尾添加全局加载函数：

<script>
    window.loadScript = function(src) {
        return new Promise((resolve, reject) => {
            // 先检查脚本是否已加载，避免重复加载
            if (document.querySelector(`script[src="${src}"]`)) {
                resolve();
                return;
            }
            const script = document.createElement('script');
            script.src = src;
            script.type = 'text/javascript';
            script.onload = () => resolve();
            script.onerror = () => reject(new Error(`加载脚本失败: ${src}`));
            document.body.appendChild(script);
        });
    };
</script>

方法2：在_Layout.cshtml中根据路由条件加载脚本 #

如果子版块路由有统一前缀（比如都以/Samples开头），可以直接在静态布局文件中通过路由判断加载脚本：

修改_Layout.cshtml的<body>部分：

<body>
    @RenderBody()

    <!-- 原有错误提示、Blazor核心脚本等内容 -->

    <script src="_framework/blazor.server.js"></script>
    
    @if (Context.Request.Path.StartsWithSegments("/Samples"))
    {
        <script src="Sample.js"></script>
    }
</body>

这种方式简单直接，但缺点是只要路由匹配就会加载脚本，适合路由规则明确的场景。

方法3：通过HeadContent加载静态脚本 #

如果脚本不需要动态判断，也可以将脚本放到HeadContent中（Blazor允许在HeadContent中添加静态资源引用），但需注意脚本执行时机：

<HeadContent>
    <link rel="stylesheet" href="sample.css" />
    <script src="Sample.js" defer></script>
</HeadContent>

添加defer属性可确保脚本在DOM加载完成后执行，避免因依赖DOM未渲染导致的错误。

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