ModalPopupExtender IFrame 在 FireFox 中为空白答案

【问题标题】：ModalPopupExtender IFrame is blank in FireFoxModalPopupExtender IFrame 在 FireFox 中为空白
【发布时间】：2012-03-02 20:17:00
【问题描述】：

我已经使用 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>

【问题讨论】：

解决方案是使用 "frame.style.visibility = "hidden"; ... frame.style.visibility = "visible"; 而不是 frame.style.display = "none"; 。 .. frame.style.display = ""; 在设置 display="none" 然后尝试设置 display="" 之后，FireFox 似乎根本不会显示 IFRAME 内容，即使它似乎正在加载 URL背景。如果我们将可见性设置为隐藏，则元素被隐藏但仍占用空间，因此我们必须做一些额外的调整以在加载时使其大小为零。

标签： firefox iframe modalpopupextender

【解决方案1】：

解决方法是使用：

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

而不是

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

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

【讨论】：