Estoy tratando de agregar un componente de una animación de carga que se ejecuta mientras uno de mis componentes que contiene un Iframe aún se está procesando. Quiero que la animación de carga pueda reconocer cuándo se ha cargado el Iframe para que se detenga y el Iframe/componente se abra completamente renderizado. ¿Hay alguna forma de agregar un parámetro booleano a mi componente y luego modificarlo con el evento onload en el evento Iframe usando JS?
Actualmente tengo esto, que no hace nada más que inicializar el componente de la pantalla de carga durante 3 segundos antes que el componente iframe. (El parámetro inicializado es el que deseo modificar usando JS).
Me disculpo de antemano si no proporcioné suficiente información, todavía soy muy nuevo en SO y en la programación en general. No dude en preguntarme o corregirme si algo en mi explicación no está claro o es incorrecto.
Puede llamar a una función de JavaScript desde Blazor y proporcionar un parámetro para que la función de JavaScript pueda responder a Blazor. De esta forma, podría llamar a una función init javascript desde blazor que le dará la posibilidad de llamar a una función Blazor cuando sea necesario y luego establecer el valor booleano en verdadero.
No probé este código.
En Blazor:
@inject IJSRuntime JSRuntime @code{ private DotNetObjectReference<NameOfYourRazorPage>? DotNetObjectRef; public bool isLoaded { get; set; } = false; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await InitJavascript(); } } public async Task InitJavascript() { DotNetObjectRef = DotNetObjectReference.Create(this); await JSRuntime.InvokeVoidAsync("initFunc", DotNetObjectRef); } [JSInvokable] public void IframeInitDone() { isLoaded = true; StateHasChanged(); } }En Javascript:
window.initFunc = (dotNetHelper) => { document.querySelector("iframe").addEventListener("load", iframeLoaded); function iframeLoaded(){ dotNetHelper.invokeMethodAsync('IframeInitDone'); } };No sé qué sucede si el iframe ha terminado de cargarse antes de llamar a la función.
Aquí está el Doc ;