如何在子页面中隐藏母版页的加载面板？

问题根源 #

点击菜单项时，前端执行showLoadingPanel()显示加载面板，随后跳转到GetFile.aspx。但GetFile.aspx直接输出文件流（通过Response.End()终止响应），不会渲染母版页的HTML内容，因此你在GetFile.aspx后台修改母版页加载面板的操作完全无法传递到客户端。同时，浏览器处理文件下载时，原页面（显示加载面板的页面）不会自动刷新或触发隐藏逻辑，导致加载面板一直显示。

解决方案 #

方案1：用隐藏iframe处理下载，完成后自动隐藏加载面板

这种方法无需修改GetFile.aspx，只需调整前端跳转逻辑和母版页的JavaScript：

1. 修改母版页的JavaScript函数：

function showLoadingPanel() {
    var loadingPanel = document.getElementById("loadingPanel");
    if (loadingPanel) {
        loadingPanel.style.display = "block";
        
        // 创建隐藏iframe加载下载页面
        var downloadIframe = document.createElement('iframe');
        downloadIframe.style.display = 'none';
        downloadIframe.src = 'GetFile.aspx';
        
        // 下载完成（iframe加载完成）后隐藏面板
        downloadIframe.onload = function() {
            loadingPanel.style.display = 'none';
            document.body.removeChild(downloadIframe);
        };
        
        document.body.appendChild(downloadIframe);
        
        // 阻止默认的页面跳转行为
        return false;
    }
}

2. 修改菜单项的点击事件绑定：
   在后台代码中，使用RadMenuItem的OnClientClick属性替代直接添加onclick属性，确保能阻止默认跳转：

Dim mnuItem As New RadMenuItem()
mnuItem.Text = displayname.DisplayName
mnuItem.OnClientClick = "return showLoadingPanel();"
mnuItem.NavigateUrl = "GetFile.aspx"

方案2：确保母版页控件ID在客户端正确识别（可选）

如果之前的showLoadingPanel()偶尔找不到元素，给母版页的加载面板设置固定客户端ID：

<div runat="server" id="loadingPanel" ClientIDMode="Static" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
        <img src="../Images/ajax-loader_clock.gif" alt="Loading..." />
    </div>
</div>

为什么之前的方法无效？ #

• GetFile.aspx的后台代码修改母版页控件：因为Response.End()直接终止了响应，页面的HTML内容（包括母版页的控件修改）根本不会输出到客户端，浏览器只会接收到文件流，无法执行任何页面DOM修改。
• 子页面添加CSS类：同样因为GetFile.aspx不渲染完整页面，CSS类不会被加载到原页面，无法影响已显示的加载面板。

内容的提问来源于stack exchange，提问作者Developer