경상북도종합자원봉사센터

게시판을 IFRAME으로 페이지에 삽입할 경우 IFRAME 내부의 내용이 설정한 높이(height)

보다 크게되면 스크롤바가 생기게 됩니다.
그러면 보기에도 별로 안좋고 사용하기도 불편하게 되죠..

그럴때 내용의 크기에 따라서 IFRAME의 크기를 변경해 주면 스크롤바를 안보이게 할 수 있습니다.
내 보드를 IFRAME으로 페이지에 삽입할 경우 사용하시면 스크롤바 없이 깔끔하게 처리하실 수 있습니다.

일단 아래의 자바스크립트 코드를 페이지에 포함 시킵니다.


function ResizeFrame(name)
{
  // IFRAME 내부의 body 개체
  var fBody  = document.frames(name).document.body;
  // IFRAME 개체
  var fName  = document.all(name);

  // IFRAME 내부의 body개체의 넓이를 계산하여 IFRAME의 넓이를 설정해 준다.
  fName.style.width 
    = fBody.scrollWidth + (fBody.offsetWidth - fBody.clientWidth);
  // IFRAME 내부의 body개체의 높이를 계산하여 IFRAME의 높이를 설정해 준다.
  fName.style.height 
    = fBody.scrollHeight + (fBody.offsetHeight - fBody.clientHeight);

  // 만약 IFRAME의 크기 설정에 실패 하였다면 기본크기로 설정한다.
  if (Frame_name.style.height == "0px" || Frame_name.style.width == "0px")
  {
    fName.style.width = "700px";     //기본 iframe 너비
    fName.style.height = "300px";    //기본 iframe 높이
  }
}

위 자바스크립트를 페이지에 포함시키셨다면 이제 IFRAME 내부의 페이지가 로드 될때마나 크기를 다시 설정 하도록 onload 이번트에서 자바스크립트 함수를 호출해 줍니다.


<iframe name="NeBoard" src="/neboard/board.aspx?bno=005001&mode=LIST&goto=1"
    scrolling="No" onLoad="ResizeFrame('NeBoard');" ></iframe>

이렇게 하시면 IFRAME내부의 페이지가 로드될때 마다 크기를 계산해서 IFRAME의 크기를
알맞게 다시 설정해 주기때문에 스크롤바가 표시 않되도록 할 수 있습니다.

그럼 유용하게 사용하시고, 혹시 질문사항 있으시면 질문 답변 게시판으로 올려주세요~

[출처] iframe 크기 자동 조절|작성자 마루아라

검색

시군센터 뉴스