본문 바로가기
JQuery

jQuery를 이용하여 iframe자식(src)페이지에서 부모페이지의 iframe 높이(height) 조절하기

by BeGeek 2013. 1. 29.

자식페이지  parentIframeControl.jsp

 <%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>자식페이지 - Iframe src</title>
<script type="text/javascript" src="./js/jquery-1.9.0.js"></script>
<script type="text/javascript">

 function resize(){
  
  var resizeHeight = $('#content').height();
  
  $("#iframeWin",parent.document).height( resizeHeight + 150 );
  
 }
 
 setTimeout("resize()", 1000);

</script>
</head>
<body>
 <div id="content">
  Iframe inner page<br/>
  Iframe inner page<br/>
  Iframe inner page<br/>
  Iframe inner page<br/>
  Iframe inner page<br/>
  Iframe inner page<br/>
 
    
  -End-
 </div>
 
 

</body>
</html>

 

부모페이지 parentIframeControl_parent.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>부모페이지 </title>
<script type="text/javascript" src="./js/jquery-1.9.0.js"></script>
</head>
<body>
 <div>
  <iframe id ="iframeWin" src="parentIframeControl.jsp"/>
 </div>
 
 
</body>
</html> 

 

-> 부모페이지에서 iframe 을 통해 자식페이지를 띄울때 자식페이지에 정의해둔 resize() 메소드에 의해

    부모페이지의 iframe 크기가 자식페이지의 지정한 컨텐츠 높이에 맞게 변경 되게 됨.

   (위 코드에선 처리과정을 보기 위해 setTimeout() 메소드를 써서 시간차를 주었음)

 

 

댓글

티스토리툴바