ModalPopupExtender FireFoxでIFrameが空白

Question

IFrameを使用してモーダルポップアップを実装しました。私はいくつかのJavaScriptを使用してメインのコンテンツ（Popup2_Panel1）を非表示にし、IFrameの読み込み中に読み込みメッセージ（Popup2_Panel2）を表示します。 IFrameの読み込みが完了すると（iframeのonloadイベント）、読み込み中のメッセージは非表示になり、メインコンテンツ（IFrame付き）の表示が解除されます。これはIE/Safari/Chrome/Operaで動作しますが、FFでは、メインコンテンツが表示された後にIFrameコンテンツが空白になります。

どのように私はこの作業をFireFoxで行うことができますか？ hide/showコードを除外すると、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 = ""; 

Firefoxが後にすべてのIFRAMEの内容を表示しません表示されますdisplay = "none"を設定し、backgrにURLをロードしているように見えても、display = ""を設定しようとしていますオンド。可視性を非表示に設定した場合、要素は表示されませんが、スペースを占有するので、読み込み中にジャグリングを追加してサイズをゼロにする必要があります。