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中是空白的

回答

相關問題