如何检查 Blazor 服务器应用程序中的 iframe 是否已完成加载内容？

Question

我在 blazor 服务器应用程序的 iframe 中加载不同的 htmlpage。要更改 iframe 的内容，我使用多个按钮。单击按钮时，会在 Iframe 中加载相应的 Html 页面（一个 Iframe - 不同的内容 - 通过单击按钮更改）。

如何检查点击后内容是否已完全加载？这样做的原因是，现在如果用户单击不同的按钮来快速地一个接一个地点击，Iframe 根本不会显示内容（只有底层网格的背景颜色和停滞）。 iframe 加载完成后能否取回 bool 值？

如果我从 Js 那里获得知识，我就不会进入 Blazor。我发现 js 是解决这个问题的帖子，但是。我不知道如何在我的 blazor 应用程序中正确实现它。我不能简单地将那个 js 复制到 hmtlpage 中。它必须在文件 _Host.cshtml 中，但如果我把它放在那里 ...document.querySelector('myIframe').addEventListener... 在 developmenttools 控制台中说 null 。谢谢你的帮助。如果它与 js 有关系，请如此友好，并尝试向我解释它，就像你对一个 nuub（我是什么 :) 一样。

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

Answer 1

Blazor 绝对可以接收 DOM 事件，您可以直接在 razor 代码中附加到事件，而无需 JS，因此您可以使用 C# 编写逻辑。

诀窍是在事件前加上 @，就像您的示例中的 @onload，然后将 EventCallback / Method 作为参数。

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

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

有关更多信息，请参阅ASP.NET Core Blazor event handling 上的文档。

---

但人们也可能想知道为什么您现在尝试的老式方法不起作用......对此我没有答案，而且我过去也曾为此苦苦挣扎。似乎 blazor 吃事件来支持它自己并且经常这样做“手动配置”事件会丢失。我最近在这方面遇到的问题越来越少了，因为我更多地转向了“blazor way”的做事方式。