How to check if in a Blazor server app a iframe has finished loading content?

user_12984060 0
Viewed 1728

I load different htmlpages inside a Iframe in a blazor server app. To change the content of the Iframe I use multiple buttons. On click of a button a corresponding Html page is loaded in the Iframe (one Iframe - diffenrent content - changed via button click).

How can I check if content is fully loaded after click? Reason for this is, right now if the user is clicking different buttons to fast after one an other the Iframe doesn't show content at all (only the backgroundcolor of the underlying grid and stalles). Can I get a bool value back after Iframe has finished loading?

Please I wouln't be into Blazor if I had knowledge from Js. I have found posts where js is the solution for this but. I don't know how to properly implemnt that into my blazor app. I can't simply copy that js into the hmtlpage. It has to be in the file _Host.cshtml but if I put it there the ...document.querySelector('myIframe').addEventListener... sayes null in the developmenttools console. Thank you for help. Please if it has to do with js be so kind and try to explain it to me as you would to a nuub (what Iam :).

<script type="text/javascript">
        document.querySelector('myIframe').addEventListener("load", ev => {
            console.log('iframe is completely loaded');
        })
</script>

blazor iframe javascript
1 Answers

Blazor can absolutely receive DOM-events, and you can attach to the events directly in the razor code without the need for JS so you can write your logic using C#.

The trick is to prefix the event's with @, like @onload in your example, which then takes an EventCallback / Method as a parameter.

<iframe src="https://some.embeddedsite.com" @onload="IFrameLoaded" />

@code {
    private void IFrameLoaded(ProgressEventArgs e)
    {
        Console.WriteLine("IFrame loaded");
    }
}

See the docs on ASP.NET Core Blazor event handling for more.

But one might also wonder why the old-fashioned way you are trying now is not working... And to that I don't have an answer, more than that I have also struggled with the same in the past. It seems blazor eat events to support it self and doing so often "manually configured" events gets lost. I have had less problems with that lately though as I have steered more to the "blazor way" of doing things.

user_18075420
Related