ModalPopupExtender FireFox에서 IFrame이 비어 있습니다.

IFrame을 사용하여 모달 팝업을 구현했습니다. IFrame이로드되는 동안 주 콘텐츠 (Popup2_Panel1)를 숨기고 로딩 메시지 (Popup2_Panel2)를 표시하기 위해 일부 자바 스크립트를 사용합니다. IFrame의로드가 끝나면 (iframe의 onload 이벤트)로드하는 메시지를 숨기고 IFrame을 사용하여 기본 콘텐츠를 숨김 해제합니다. 이것은 IE/Safari/Chrome/Opera에서 작동하지만 FF에서는 기본 콘텐츠를 표시 한 후에 IFrame 콘텐츠가 비어 있습니다.ModalPopupExtender FireFox에서 IFrame이 비어 있습니다.

어떻게하면 FireFox에서이 작업을 할 수 있습니까? 숨기기/표시 코드를 생략하면 IFrame이 FireFox에 표시되지만 iframe에 새로운 내용이로드되기 전에 내용을 표시하고 싶지 않습니다. 그렇지 않으면 이전 내용이 잠시 볼 수 있습니다.

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

대신

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

의 파이어 폭스가 전혀 후 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을로드합니다. 표시 여부를 숨김으로 설정하면 요소는 숨겨 지지만 여전히 공간을 차지하므로로드하는 동안 크기를 0으로 줄이기 위해 추가 저글링을 수행해야합니다. – Etherman

솔루션을 사용하는 것입니다 : 여기

내 코드입니다 display = "none"으로 설정하고 backgr에 URL을로드하는 것처럼 보일지라도 display = ""로 설정하려고합니다. ound. 가시성을 숨김으로 설정하면 요소는 숨겨 지지만 여전히 공간을 차지하므로로드하는 동안 크기를 0으로 지정하기 위해 추가 저글링을 수행해야합니다.

출처

2012-02-13 08:12:00 Etherman

ModalPopupExtender FireFox에서 IFrame이 비어 있습니다.

답변

관련 문제