Blazor - 在DOM加载和渲染完成后正确应用JS的方法

在Blazor中，我们可以使用以下几种方式在DOM加载和渲染完成后正确应用JS：

1. 使用JSInterop来调用原生的JavaScript API。

@inject IJSRuntime JSRuntime
@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("applyCustomJS");
        }
    }
}

可以在OnAfterRenderAsync方法中调用JSRuntime的InvokeVoidAsync方法来调用JavaScript的applyCustomJS方法。

2. 在Blazor组件中使用@ref以及ElementReference属性来引用DOM元素。

@inject IJSRuntime JSRuntime
@code {
    ElementReference myDiv;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("applyCustomJS", myDiv);
        }
    }
}

可以在OnAfterRenderAsync 方法中使用JSRuntime的InvokeVoidAsync方法来传递myDiv引用给applyCustomJS函数。

3. 使用JavaScript的window.onload事件来确保DOM已经加载和渲染完成。

在JavaScript中，可以使用window.onload函数来确保DOM已加载和渲染完成以后再执行需要执行的JavaScript代码。 注意：window.onload 只允许你在一个页面上注册一个事件处理程序，因此如果您的应用程序有多个组件需要使用它，则出现问题的可能性很大。