如何在.NET 8静态渲染Blazor组件中嵌入外部JS脚本？

核心问题说明 #

Blazor静态渲染模式下，直接在组件HTML中编写的<script>标签不会被浏览器执行；若通过fetch等方式加载外部脚本还会触发CORS限制。而通过动态创建<script>标签加载Gist脚本可绕过这两个问题——浏览器对<script>标签的跨域加载有特殊处理（类似JSONP机制），无需目标服务器配置Access-Control-Allow-Origin头。

方法一：使用JavaScript隔离（推荐，便于复用） #

1. 创建JS加载模块
   在wwwroot/js目录下新建gistLoader.js文件，内容如下：

export function loadGist(gistId, targetId) {
    const script = document.createElement('script');
    script.src = `https://gist.github.com/robocik/${gistId}.js`;
    script.async = true;
    document.getElementById(targetId).appendChild(script);
}

2. 在Blazor组件中调用模块

@page "/gist-display"
@inject IJSRuntime JS
@implements IAsyncDisposable

<!-- 用于挂载Gist的容器 -->
<div id="gist-container"></div>

@code {
    private IJSObjectReference? _jsModule;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 导入JS模块
            _jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "./js/gistLoader.js");
            // 加载指定Gist到容器中
            await _jsModule.InvokeVoidAsync("loadGist", "9506834", "gist-container");
        }
    }

    // 释放JS模块资源
    public async ValueTask DisposeAsync()
    {
        if (_jsModule is not null)
        {
            await _jsModule.DisposeAsync();
        }
    }
}

方法二：内联JS代码（快速实现） #

无需额外JS文件，直接在组件中通过IJSRuntime动态创建脚本标签：

@page "/gist-display"
@inject IJSRuntime JS

<div id="gist-container"></div>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync(@"
                const container = document.getElementById('gist-container');
                const script = document.createElement('script');
                script.src = 'https://gist.github.com/robocik/9506834.js';
                script.async = true;
                container.appendChild(script);
            ");
        }
    }
}

关键注意点 #

• 必须在OnAfterRenderAsync中执行脚本注入逻辑：此时组件已渲染完成，目标DOM容器存在，能确保脚本挂载成功。
• 动态创建<script>标签是安全且合规的方式，不会触发CORS限制，因为浏览器允许此类跨域资源加载用于脚本执行。

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