<!--
iframe 높이 자동조정
1. 첫번째 방법..
iframe 의 대상이 되는파일에 다음의 내용을 문서 끝에 넣어주세요...
<script>
self.resizeTo(document.body.scrollWidth , document.body.scrollHeight + 10);
</script>
2. 두번째 방법
태이블을 만들어놓고 그 안에 아이프레임으로 게시판을 삽입했습니다.
링크를 눌러보시면 자동으로 크기가 늘어나는것을 보실 수 있습니다.
iframe 소스내에 onload="doResize()" 를 넣어주셔야 하고,
width사이즈는 픽셀로 고정 하셔도 되지만 height 사이즈는 퍼센트로 해주셔야
자동으로 높이가 늘어납니다.
<script>
function doResize()
{
container.height = myframe.document.body.scrollHeight;
container.width = myframe.document.body.scrollWidth;
}
</script>
<table align="center" border="1" width="762">
<tr>
<td width="752" height="67" align="center" valign="top" colspan="2">
<p> </p>
</td>
</tr>
<tr>
<td width="132" height="354" align="center" valign="top">
메뉴
</td>
<td width="614" height="354" align="center" valign="top">
<table width="614" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="container"><iframe src="http://프레임에 들어갈 문서" scrolling=no name="myframe" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="no" onload="doResize()" ></iframe></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="752" colspan="2">
<p> </p>
</td>
</tr>
</table>
--------------------------------------------------------------------
iframe 높이 자동조정을 이용하여 인쇄될 페이지를 만들어 볼까요?
아래와 같이 응용하면 제품목록이 많거나 적거나 높이에 상관없이
아이프레임이 적용된 페이지도 자동으로 늘어나고,
아이프레임으로 연결된 페이지도 프린트하여 볼수있다. *^^*
1. 먼저 인쇄될 페이지를 아래와 같이 아이프레임 안에 넣어준다.
<!-- iframe 인쇄 -->
<script>
function doResize()
{
container.height = myframe.document.body.scrollHeight;
container.width = myframe.document.body.scrollWidth;
}
</script>
<iframe src="order_print.asp" frameborder=NO width=706 scrolling=no height="100%" bordercolor="#FFFFFF" onload="doResize()" ></iframe>
2. order_print.asp 인쇄물 페이지
1) <head></head>사이에 자바스크립트를 넣어준다.
<head>
<SCRIPT>
function printWindow(){
bV = parseInt(navigator.appVersion)
if (bV >= 4) window.print()
}
</SCRIPT>
</head>
2) <body></body>사이에
인쇄하기 버튼에 아래와 같이 링크를 걸고 자바스크립트를 넣어준다.
<a href="javascript:window.print()">
<img src="../images/sub_icon5.gif" width="89" height="22" border="0">
</a>
<script>
self.resizeTo(document.body.scrollWidth , document.body.scrollHeight + 10);
</script>
참고로 인쇄하기 버튼 말고 다른 버튼의 링크는 target="_parent" 타겟을 이렇게 지정해 주어야
아이프레임 안에 테이블에 링크가 열리지 않는다.
-->
'JavaScript' 카테고리의 다른 글
| 텍스트박스에 엔터 클릭 이벤트 주는 스크립트 (1) | 2009.03.26 |
|---|---|
| 팝업 오픈시 팝업 크기에 따라 팝업 사이즈 자동 조절 (1) | 2008.07.16 |
| 팝업 오픈 (1) | 2008.04.28 |
| 오프너 리로드 (0) | 2008.04.28 |
