如何在Blazor Server端调用JavaScript函数？及函数执行时机咨询

一、jQuery函数的调用时机 #

你写的$(function () { ... })是jQuery的文档就绪事件处理函数，它会在DOM树完全构建完成后立即执行——注意这和window.onload不同，后者要等所有资源（图片、样式表等）加载完毕才触发。

因为你把脚本放在了_Host.cshtml里，只要jQuery已经加载完成（确保脚本顺序正确：先引入jQuery，再引入你的外部JS文件），当页面的DOM结构解析完成后，这个函数就会自动执行，不需要手动调用。

二、Blazor Server端调用JavaScript函数的方法 #

在Blazor Server中调用JS函数主要依赖IJSRuntime服务，以下是具体步骤：

1. 注入IJSRuntime服务 #

在需要调用JS的Blazor组件（.razor文件）顶部注入服务：

@inject IJSRuntime JSRuntime

2. 暴露全局可访问的JS函数 #

确保你的JS函数是全局可访问的（比如挂载到window对象上），可以把原来的jQuery初始化代码改成全局函数：

// 外部JS文件中
window.initFormSteps = function() {
    $("#form-total").steps({
        // 你的配置项
    });
};

3. 在Blazor组件生命周期中调用JS #

Blazor组件的OnAfterRenderAsync生命周期方法是调用DOM操作类JS函数的最佳时机（此时组件已经渲染完成，对应的DOM元素已存在）：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    // 仅在组件首次渲染完成后调用一次初始化函数
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("initFormSteps");
    }
}

其他调用场景 #

• 如果JS函数有返回值，使用InvokeAsync<T>方法，比如获取DOM元素属性：

  var elementHeight = await JSRuntime.InvokeAsync<int>("getElementHeight", "form-total");
  

• 若需要频繁调用JS或双向交互，可使用JS互操作的高级特性（比如创建JS对象引用、调用实例方法等）。

注意事项 #

• 确保_Host.cshtml中脚本引入顺序正确：先加载jQuery，再加载你的外部JS文件。
• Blazor Server组件可能因状态变化重新渲染，若JS操作的DOM元素被重新生成，需重新调用JS函数。

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