[javascript] 아이프레임 높이 자동변경
로빈아빠
본문
iframe 높이 자동으로 설정하기
이번에는 홈페이지 제작시 유용하게 사용되는 iframe 에서
내용물(?)의 길이에 맞춰 자동으로 높이가 조절되게 하는 방법을 알아봅니다.
우선 두개의 소스문이 있습니다. 높이를 자동으로 조절하기 위한
스크립트문과 아이프레임 삽입코드입니다.
첫번째 소스
아래소스는 자바스크립트문입니다. 이 소스를 Html문서에서
body 문 아래에 삽입합니다.
(스크립트문은 위치에 따라 큰 차이는 없지만 윗 부분에 차례로 정리해야
나중에 수정하거나 관리에도 좋습니다.)
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;</span>
//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
//-->
두번째 소스
아래소스는 iframe 삽입 코드 입니다. 원하는 위치에 아래 소스를
삽입하세요 일반적인 iframe 삽입문과는 달리 몇가지가 첨가 되어있는데요
스크립트문의 기능을 호출 한다고 생각하시면 됩니다.
onLoad="calcHeight();"
src="http://xxx.net"
scrolling="NO"
frameborder="0"
height="0">
사용예제)
<html>
<head>
<title>iframe 높이 자동 조절</title>
</head>
<script language="JavaScript">
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
//-->
</script>
<body>
<iframe width="700" id="the_iframe"
onLoad="calcHeight();"
src="http://www.xxx.com/xxx.php"
scrolling="NO"
frameborder="0"
height="0">
</iframe>
</body>
</html>
[이 게시물은 VIRHAC님에 의해 2009-09-13 14:39:33 HTML에서 이동 됨]
이번에는 홈페이지 제작시 유용하게 사용되는 iframe 에서
내용물(?)의 길이에 맞춰 자동으로 높이가 조절되게 하는 방법을 알아봅니다.
우선 두개의 소스문이 있습니다. 높이를 자동으로 조절하기 위한
스크립트문과 아이프레임 삽입코드입니다.
첫번째 소스
아래소스는 자바스크립트문입니다. 이 소스를 Html문서에서
body 문 아래에 삽입합니다.
(스크립트문은 위치에 따라 큰 차이는 없지만 윗 부분에 차례로 정리해야
나중에 수정하거나 관리에도 좋습니다.)
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;</span>
//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
//-->
두번째 소스
아래소스는 iframe 삽입 코드 입니다. 원하는 위치에 아래 소스를
삽입하세요 일반적인 iframe 삽입문과는 달리 몇가지가 첨가 되어있는데요
스크립트문의 기능을 호출 한다고 생각하시면 됩니다.
onLoad="calcHeight();"
src="http://xxx.net"
scrolling="NO"
frameborder="0"
height="0">
사용예제)
<html>
<head>
<title>iframe 높이 자동 조절</title>
</head>
<script language="JavaScript">
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
//-->
</script>
<body>
<iframe width="700" id="the_iframe"
onLoad="calcHeight();"
src="http://www.xxx.com/xxx.php"
scrolling="NO"
frameborder="0"
height="0">
</iframe>
</body>
</html>
[이 게시물은 VIRHAC님에 의해 2009-09-13 14:39:33 HTML에서 이동 됨]
관련링크
댓글목록
등록된 댓글이 없습니다.