如何在Blazor指定页面添加widget脚本（通过JSRuntime实现）

Blazor组件渲染时会自动忽略内部的<script>标签，因此无法直接在Razor组件内插入脚本生效，可通过IJSRuntime动态注入脚本实现指定页面加载的需求，步骤如下：

1. 目标页面引入依赖 #

在需要显示Widget的Razor页面顶部注入IJSRuntime，同时实现异步释放接口用于离开页面时清理Widget：

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

2. 首次渲染时动态注入脚本 #

重写OnAfterRenderAsync生命周期方法，仅在页面首次渲染完成后执行脚本注入逻辑，同时加校验避免重复加载：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync(@"
            () => {
                // 已加载过的情况下直接返回，避免重复插入
                if (document.querySelector('script[src=""//code-ya.jivosite.com/widget/kiMhndUDCT""]')) {
                    return;
                }
                const widgetScript = document.createElement('script');
                widgetScript.src = '//code-ya.jivosite.com/widget/kiMhndUDCT';
                widgetScript.async = true;
                // 如需脚本加载完成后执行自定义初始化，可添加onload回调
                // widgetScript.onload = () => { window.jivoAPI?.setLocale('zh-CN'); };
                document.body.appendChild(widgetScript);
            }
        ");
    }
    await base.OnAfterRenderAsync(firstRender);
}

3. 页面离开时清理Widget（可选） #

如果需要切换页面后Widget自动消失，实现DisposeAsync方法调用对应销毁接口：

public async ValueTask DisposeAsync()
{
    // 调用Jivosite官方提供的销毁API清除实例
    await JSRuntime.InvokeVoidAsync("window.jivoAPI?.destroy");
}

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