[ASP.NET] DIV 태그내에 위치한 IFrame 태그로 페이지 호출시 Loading Progress 상태 표시

페이지 이동시 심심함을 달래줄... 페이지 불러오기 진행상태 표시..

한 페이지내에 DIV 태그가 위치한곳에 조그맣게 다른페이지를 보여주는 처리를 하는데있어
다른페이지가 Loading 될동안 모래시계와 같은 Progress 상태를 표시해 주기 위한 방법입니다.

 

 

1. 메인 페이지내에 페이지보여주는 DIV, Loading 이미지 보여줄 DIV 태그 추가 및 DIV 초기화 function 호출구문 추가(페이지 Load시 setShowLayer 명시적으로 호출구문 추가)

<form id=form1 runat=server>
 <!-- ================= [ DIV 정보 보기 및 수정 ] =========================================== -->

<div id="editInfo" style="Z-INDEX: 100; VISIBILITY: visible; POSITION: absolute; border-right:solid d4d4d4 1px; border-left:solid d4d4d4 1px; border-top:solid d4d4d4 1px; border-bottom:solid d4d4d4 1px; TOP:5px">
        <iframe id="iframEdit" scrolling=no width="500" height="270"  frameborder=0  class=""></iframe>  // IFrame의 Width값은 Loading 이미지표시 DIV 와 페이지표시 DIV 의 위치값을 구할때 사용될것이다. Height 값은 화면 보여질 페이지의 Height 값.

</div>

<!-- ================= [ RODING  이미지        ] =========================================== --> 

<div id="Loading" style="Z-INDEX: 110; VISIBILITY: visible; POSITION: absolute; TOP: 150px">
        <table>
            <tr>
                <td><img src="../images/commons/ajax-loader2-eastlink.gif" border="0" /></td>
            </tr>
        </table>

</div>       

<script language="javascript">setShowLayer("hidden", "editInfo", "Loading", 183, 500);</script>

.. 생략 ..

 

2. DIV 초기화 function 추가

<script language="javascript" type="text/javascript">

// *****************************************************
// 내용 : 레이어 Visible(활성/비활성) 시작, 2Depth 페이지 전용
// 작성일자 : 2007.11.30
// 작성자 : 한재준
// visible : 화면표시 여부 (Hidden, Show)
// pageDiv : .aspx 페이지를 보여줄 Div Name (IFrame을 가진 Div)
// loadingDiv : Loading 이미지를 보여줄 Div Name
// leftMenuWidth : Left메뉴 Width (Left메뉴 Width 값을 빼야지만 Sub Page(Left 메뉴의 우측에 보여지는 페이지)의 중간값을 구할수있다.)
// iFrameWidth : IFrame의 Width
// ***************************************************** 
function setShowLayer(visible, pageDiv, loadingDiv, leftMenuWidth, iFrameWidth)
{
 var objIFrameDiv = document.all[pageDiv];
 var objLoadingDiv = document.all[loadingDiv];

 if(visible == "show")
 {
  objIFrameDiv.style.visibility = "visible";
  objLoadingDiv.style.visibility = "visible";

        var screenX = screen.Width/2;   // 전체화면 절반
       
        var iFrameX = iFrameWidth/2;   // IFrame 절반
        var tempX = screenX - iFrameX;
        objIFrameDiv.style.left = tempX - leftMenuWidth; // Left메뉴의 Width를 빼준다. 빼주는 이유는 Left메뉴의 우측끝이 Div 태그가 포함된 페이지의 시작이기 때문이다 (Left 메뉴없을시에는 leftMenuWidth 빼기 않함)
  
  var loadingX = 48/2; // Loading 이미지 절반 (Loading 이미지의 Width는 48px 입니다)
  tempX = screenX - loadingX;
  objLoadingDiv.style.left = tempX - leftMenuWidth; // Left메뉴의 Width를 빼준다. 빼주는 이유는 Left메뉴의 우측끝이 Div 태그가 포함된 페이지의 시작이기 때문이다 (Left 메뉴없을시에는 leftMenuWidth 빼기 않함)
 }else
 {     
  objIFrameDiv.style.visibility = "hidden";
  objLoadingDiv.style.visibility = "hidden";
 }  
}

 

// Div 태그내 IFrame 페이지 보여주기

// HTML 컨트롤의 onclick 이벤트 발생시 호출되는 함수 입니다.

function ShowDiv()

{
            var avs_URL = "test.aspx" ;

            setShowLayer("show", "editInfo", "Loading", 183, 500);

            document.all.iframEdit.src = avs_URL;

}

</script>

 

 

3. DIV 태그를 가진 페이지의 HTML 버튼 컨트롤에 onclick 이벤트를 추가한다.

onclick="ShowDiv();"

 

 

4. DIV 내의 IFrame으로 호출될 페이지의 HTML 소스의 마지막 부분에 부모페이지에있는 Loading 이미지를가진 Div태그 숨김처리 script 함수 추가

.. 생략 ..

  </form>
 </body>
</HTML>
<script language="javascript">
// IFrame으로 호출된 현재 페이지는 Loading 다된후 화면상에 표시되고 IFrame을 가진 부모폼의 loading이미지를 가진 Div 닫기(2,3 번째 인자값으로 Loading Div ID 넘겨주기, Loading Div 태그만 넘겨줘서 IFrame을 가진 Div는 화면상에 보여지게하고 Loading Div만 숨겨준다.), 부모의 자바스크립트 함수를 호출하는 문법에 주의해야 한다. (parent.iframEdit.parent.함수명)
parent.iframEdit.parent.setShowLayer("hidden", "Loading", "Loading", 0, 0);
</script>

 

위와같은 방식으로 페이지내에 Div와 IFrame을 이용해 다른페이지가 Loading 되는동안 Progress 상태표시를 구현해 보았습니다.

아직 공통모듈화 시키기 전이라 사용하는데 제한적인 부분이 많지만 개인적으로 초급개발자 입장에서 궁금했었던 Tip 이었습니다.

다른페이지가 Loading 되는동안 Progress 상태표시를 해주고싶으신 분들은 이런방법도 있으니 참고하셔도 될거 같습니다.

 

작성자 : 한재준

[출처] DIV 태그내에 위치한 IFrame 태그로 페이지 호출시 Loading Progress 상태 표시|작성자 견우