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

Question

我在 blazor 服务器应用程序的 Iframe 内加载不同的 html 页面。为了更改 Iframe 的内容，我使用了多个按钮。单击按钮时，相应的 Html 页面将加载到 Iframe 中（一个 Iframe - 不同的内容 - 通过单击按钮进行更改）。

点击后如何检查内容是否已完全加载？原因是，现在如果用户连续快速单击不同的按钮，则 Iframe 根本不显示内容（仅显示底层网格和摊位的背景颜色）。Iframe 加载完成后我可以取回 bool 值吗？

如果我有 Js 的知识，我就不会喜欢 Blazor。我找到了一些帖子，其中 js 是这个问题的解决方案，但是。我不知道如何正确地将其实现到我的 blazor 应用程序中。我不能简单地将 js 复制到 hmtlpage 中。它必须位于文件 _Host.cshtml 中，但如果我把它放在那里，...document.querySelector('myIframe').addEventListener... 在开发工具控制台中会说 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 事件处理的文档。

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