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。如果我们将隐藏可见性设置为隐藏，但仍占用空间，因此我们必须做一些额外的杂耍，以便在加载时为其提供零大小。

ModalPopupExtender IFrame在FireFox中为空

1 个答案: