javascript - How to check if in a Blazor server app a iframe has finished loading content? - Stack Overflow

admin管理员组

文章数量:1336632

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 pletely loaded');
        })
</script>

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 pletely loaded');
        })
</script>

• javascript
• iframe
• blazor

Share Improve this question Follow asked Dec 29, 2020 at 19:13 nogoodnogood 1,33044 gold badges1717 silver badges4343 bronze badges 1

• After lots of unsuccessfull tries! Is it even possible to execute this js line in Blazor: document.getElementById('myFrameID').onload = function () { alert('iFrame Loaded') }; I could not get that alert to work in Blazor Server. It works in a "normal" index.html page. After studying more about this. Does anybody know at what point blazor can receive js Events? Is this even on MS DoT-List? It is possible somehow -> see nuget github./EdCharbeneau/BlazorSize but that is to advanced for me. Any idea what to do besides should have learnd Vue instead :( – nogood Commented Dec 30, 2020 at 12:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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." @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.

本文标签： javascriptHow to check if in a Blazor server app a iframe has finished loading contentStack Overflow