ModalPopupExtender IFrame 在 FireFox 中为空白

Question

我已经使用 IFrame 实现了模式弹出窗口。我使用一些 JavaScript 来隐藏主要内容 (Popup2_Panel1) 并在加载 IFrame 时显示加载消息 (Popup2_Panel2)。当 IFrame 完成加载（iframe 的 onload 事件）时，我隐藏加载消息并取消隐藏主要内容（使用 IFrame）。这适用于 IE/Safari/Chrome/Opera，但在 FF 中，在主要内容可见后，IFrame 内容为空白。

我如何才能在 Firefox 中实现此功能？如果我省略隐藏/显示代码，则 IFrame 在 FireFox 中可见，但我真的不想在 iframe 加载新内容之前显示内容，否则我们会立即看到旧内容。

这是我的代码：

<script type="text/javascript">

    function ShowPopup(srcUrl, titleCaption, width, height) {
        var frame = document.getElementById("Popup2_Frame");

        // This code causes the IFrame to be blank in FireFox
        document.getElementById("Popup2_Panel1").style.display = "none";
        document.getElementById("Popup2_Panel2").style.display = "";

        frame.width = width + "px";
        frame.height = height + "px";
        var title = document.getElementById('Popup2_Caption');
        if (title) {
            title.innerHTML = titleCaption;
        }
        frame.src = srcUrl;
        var mpe = $find('Popup2_MPE');
        if (mpe) {
            mpe.show();
        }
    }

    function PopupLoaded(frame) {

        // This code causes the IFrame to be blank in FireFox
        document.getElementById("Popup2_Panel1").style.display = "";
        document.getElementById("Popup2_Panel2").style.display = "none";

        var mpe = $find('Popup2_MPE');
        if (mpe) {
            mpe._layout();
        }
    }

</script>

<asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="ImgButton13" PopupControlID="Popup2_Window" BackgroundCssClass="popupModalBackground" OkControlID="Popup2_OK" CancelControlID="Popup2_Cancel" Drag="True" PopupDragHandleControlID="Popup2_Titlebar" BehaviorID="Popup2_MPE">
</asp:ModalPopupExtender>

<div id="Popup2_Window" class="popupWindow" style="display: none;">
    <div id="Popup2_Panel1">
        <div id="Popup2_Titlebar" class="popupTitlebar">
            <span id="Popup2_Caption">Caption</span>
            <img id="Popup2_ImgClose" runat="server" style="float: right; cursor: pointer;" src="~/Masters/_default/img/delete.png" alt="Close" onclick="javascript:document.getElementById('MainContent_Popup2_Cancel').click()" />
        </div>
        <div class="popupContent">
            <iframe id="Popup2_Frame" class="popupFrame" frameborder="0" onload="PopupLoaded(this)"></iframe>
        </div>
        <div class="tasks">
            <Exhibitor:ImgButton ID="Popup2_OK" runat="server" CssClass="icon" Text="OK" ImgSrc="~/Masters/_default/img/action-yes.png" />
            &nbsp;
            <Exhibitor:ImgButton ID="Popup2_Cancel" runat="server" CssClass="icon" Text="Cancel" ImgSrc="~/Masters/_default/img/action-no.png" />
        </div>
    </div>
    <div id="Popup2_Panel2" class="popupLoading">
        <center>
            Loading...<br />
            <br />
            <asp:Image ID="Popup2_ImgLoading" runat="server" ImageUrl="~/Masters/_default/img/loading.gif" />
        </center>
    </div>
</div>

Answer 1

解决方案是使用：

frame.style.visibility = "hidden";
...
frame.style.visibility = "visible";

而不是

frame.style.display = "none";
...
frame.style.display = "";

在设置 display="none" 然后尝试设置 display="" 后，FireFox 似乎根本不会显示 IFRAME 内容，即使它似乎在后台加载 URL。如果我们将可见性设置为隐藏，则该元素会被隐藏，但仍然占用空间，因此我们必须做一些额外的操作才能在加载时使其大小为零。