iframe 의 width 와 height 값을 자동으로 조절하는 소스입니다.
우선 2개의 html 파일이 필요합니다. iframe 코드가 들어갈 파일과 iframe 에서 불러들일 파일이지요.
iframe 코드가 들어가는 파일에는 아래와 같이 iframe 코드를 넣습니다.
<iframe id="iframe_main" src="test.html" width="0" height="0" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
아래는 iframe 에서 불러들이는 test.html 파일 내용입니다.
<html>
<head>
<title>아이프레임</title>
</head>
<body>
<!-- 아래 부분이 내용 입니다. -->
<div id="page_content" style="position:absolute;left:0;top:0;width:100%">
<table border="0" cellpadding="0" cellspacing="0" width="200" height="200">
<tr>
<td align="center">안녕하세요</td>
</tr>
</table>
</div>
<script language="JavaScript1.2">
function iframe_reset(){
dataobj=document.all? document.all.page_content : document.getElementById("page_content")
dataobj.style.top=0
dataobj.style.left=0
pagelength=dataobj.offsetHeight
pagewidth=dataobj.offsetWidth
parent.document.all.iframe_main.height=pagelength
parent.document.all.iframe_main.width=pagewidth
}
window.onload=iframe_reset
</script>
<!-- 여기까지 -->
</body>
</html>
DIV 코드로 감싼 부분이 내용이 들어갈 부분이고 스크립트 코드는 iframe 크기를 자동으로 조정하는 부분입니다.
위의 소스를 실행하면 가로 200 에 세로 200 의 iframe 이 만들어집니다.
우선 2개의 html 파일이 필요합니다. iframe 코드가 들어갈 파일과 iframe 에서 불러들일 파일이지요.
iframe 코드가 들어가는 파일에는 아래와 같이 iframe 코드를 넣습니다.
<iframe id="iframe_main" src="test.html" width="0" height="0" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
아래는 iframe 에서 불러들이는 test.html 파일 내용입니다.
<html>
<head>
<title>아이프레임</title>
</head>
<body>
<!-- 아래 부분이 내용 입니다. -->
<div id="page_content" style="position:absolute;left:0;top:0;width:100%">
<table border="0" cellpadding="0" cellspacing="0" width="200" height="200">
<tr>
<td align="center">안녕하세요</td>
</tr>
</table>
</div>
<script language="JavaScript1.2">
function iframe_reset(){
dataobj=document.all? document.all.page_content : document.getElementById("page_content")
dataobj.style.top=0
dataobj.style.left=0
pagelength=dataobj.offsetHeight
pagewidth=dataobj.offsetWidth
parent.document.all.iframe_main.height=pagelength
parent.document.all.iframe_main.width=pagewidth
}
window.onload=iframe_reset
</script>
<!-- 여기까지 -->
</body>
</html>
DIV 코드로 감싼 부분이 내용이 들어갈 부분이고 스크립트 코드는 iframe 크기를 자동으로 조정하는 부분입니다.
위의 소스를 실행하면 가로 200 에 세로 200 의 iframe 이 만들어집니다.
반응형
'홈페이지 제작 > JavaScript' 카테고리의 다른 글
| 클립보드에 복사하기 (0) | 2007.02.05 |
|---|---|
| 매월 마지막 날짜 확인하기 (0) | 2006.05.24 |
| TEXTAREA 에서 Focus() 위치 (커서위치) 마지막 으로 보내기 (0) | 2005.12.19 |
| 윈도우창(팝업창)의 width , height 값 알아내기 (0) | 2005.12.14 |
| 주민등록번호 앞자리 입력시 뒷자리로 자동 커서이동 (0) | 2005.12.12 |
