在 ASP.NET 中加载 iFrame 时显示等待消息答案

【问题标题】：Show wait message while iFrame loading in ASP.NET在 ASP.NET 中加载 iFrame 时显示等待消息
【发布时间】：2020-09-22 10:51:57
【问题描述】：

好的，情况就是这样。我有一个看起来像这样的主页：

<div id="frameSetMainPage">
    <div id="sidePanel">
        <iframe name="panel" runat="server" width="100%" height="100%"></iframe>
    </div>
    <div id="mainContent">
        <div id="listContainer">
            <iframe name="list" runat="server" width="100%" height="100%"></iframe>
        </div>
    </div>
</div>

在panel iframe 中，在后面的代码中（通过 src 属性）加载了另一个 aspx 页面，如下所示：

...
<asp:Table ID="LinkTable" runat="server" Font-Size="10" Width="100%" CellSpacing="4">
    <asp:TableRow>
        <asp:TableCell>
            <asp:HyperLink CssClass="absm_link" ID="ReqListSelect" runat="server" Target="list" NavigateUrl="ReqList.aspx" Text="DR Request List"/>
        </asp:TableCell>
    </asp:TableRow>
    <asp:TableRow>
        <asp:TableCell>
            <asp:HyperLink CssClass="absm_link" ID="AbsListSelect" runat="server" Target="list" NavigateUrl="AbsList.aspx" Text="Absence List"/>
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>
...

现在这些页面正在显示来自数据库的数据，并且页面加载需要很长时间（数据在每个页面的 Page_Load 事件中加载）。我的问题是，当用户单击链接时，他没有任何视觉线索表明任何东西都在工作。加载完所有内容后，页面将显示在屏幕上。有没有办法在最终显示包含数据的页面之前显示进度 gif？

【问题讨论】：

标签： asp.net iframe page-load-time

【解决方案1】：

如果有人偶然发现这一点，我只想说我找到了解决方案。唯一可以做到这一点的方法是使用 JavaScript，因为页面只有在整个服务器端代码执行后才会呈现。所以可以做的一件事是在页面中有一个隐藏的按钮。从 Page_Load 中删除所有重载代码并将其移动到该隐藏按钮的 Click 处理程序。现在在 Page_Load 中只需注册将调用按钮单击事件的客户端脚本。当然，在您调用 click() 方法之前，请显示您的 gif 动画。完成工作后也不要忘记隐藏它。它看起来像这样（摘自 Page_Load 方法）：

...
if (!IsPostBack)
{
  string script =
    @"$(document).ready(function () { 
      var div = document.getElementById('loadingDiv');
      div.style.display = 'block';
      var elem = document.getElementById('btnSearch');
      elem.click();
    });";
   ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
} 
else
{
   string script =
     @"
      var div = document.getElementById('loadingDiv');
      div.style.display = 'none';
     ";
    ClientScript.RegisterStartupScript(this.GetType(), "loadDone", script, true);
}
...

希望这会对某人有所帮助。

【讨论】：