iframe 크기 자동 조절 –  스크롤 없이 보기

0

iframe으로 게시판을 삽입하면, 삽입된 게시판의 게시글 길이에 따라 스크롤바가 생깁니다.

불편하고, 보기도 않좋은데, 그럴때는 유동적으로 iframe 크기를 변경해서 깔끔하게 할 수 있습니다.

아래의 자바스크립트 코드를 페이지 Html코드에 삽입합니다.

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 id="ifrm" width="100%" height="100%" frameborder="no" scrolling="no" src="iframe.html" marginwidth="0" marginheight="0" onload="resizeIframe(this)"></iframe>
< SCRIPT LANGUAGE="JavaScript">
< !--
function resizeIframe(fr) {
fr.setExpression('height',ifrm.document.body.scrollHeight);
fr.setExpression('width',ifrm.document.body.scrollWidth);
}
//-->
< /SCRIPT>
 
Leave A Reply

Exit mobile version