ModalPopupExtender IFrame在FireFox中是空白的

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

我如何在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>

来源

2012-02-10 Etherman

的解决方案是使用“frame.style.visibility = “隐藏”; ... frame.style.visibility = “可见”，而不是 frame.style.display = “无”; ... frame.style.display =“”; 看来FireFox在设置display =“none”之后根本不会显示IFRAME的内容，然后尝试设置display =“”，即使它看起来像是在后台加载URL如果我们设置隐藏的可见性，元素被隐藏，但仍然占用空间，所以我们必须做一些额外的杂耍以在加载时给它一个零大小。 – Etherman 2012-02-10 12:52:23

的解决方案是使用：的

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

代替

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

它出现在所有后，Firefox将不显示IFRAME内容设置显示=“无”，然后尝试设置显示=“”，即使它似乎加载在高建群的网址ound。如果我们将隐藏的可见性设置为隐藏，但仍占用空间，所以我们必须在加载时进行一些额外的杂耍以使其大小为零。

来源

2012-02-13 08:12:00 Etherman

ModalPopupExtender IFrame在FireFox中是空白的

回答

相关问题