아이프레임 자바스크립트

 
클라이언트들이 자주 요구하는 작업중에 하나입니다

페이지에서 다른곳으로 이동을 할떄 메뉴부분들은 남기고 메인쪽 내용만 바뀌게하는거죠

그럴땐 아이프레임을 쓰면 됩니다만

메인프레임들의 위치,, 특히 높이길이가 다를때 대략난감 상황에 빠지게 되는 부분입니다

아래는 그 아이프레임들을 각각 사이즈를 자동으로 조절할수 있게 해주는 예제입니다

유용히 쓰세요 ^^

ps : 링크페이지의 주소를 실제존재하는 주소로 적어주세요

아래 그림의 페이지 일부소스를 옴겼습니다

우선 요스크립트를 선언해주구요

<script>
var memobj = new Array();
function syncheight(obj){
 if(obj){
  obj.style.height=obj.contentWindow.document.body.scrollHeight;
 }
 else{
  while(memobj.length>0){
   memobj[0].style.height=memobj[0].contentWindow.document.body.scrollHeight;
   memobj.shift();
  }
 }
}
function viewsmallframe(){
 var tmptr = event.srcElement.parentNode.parentNode.nextSibling;
 tmptr.style.display = tmptr.style.display=='none'?'':'none';
 
 memobj[memobj.length] = tmptr.cells(0).childNodes(0);
 memobj[memobj.length] = parent.document.getElementById('mainframe');
 setTimeout("syncheight()",1);
}
</script>

다음에 링크걸 그림들 2개 입니다

<tr>
  <td><a href="down.php" target="about"><img src="images/img_11.gif" name="Image98" width="145" height="29" border="0"></a></td>
 </tr>
 <tr>
  <td><a href="guide.php" target="about"><img src="images/img_12.gif" name="Image97" width="145" height="29" border="0"></a></td>
 </tr>

그리고 페이지가 나타날 아이프레임 입니다 처음에 src주소가 있는 이유는

첫페이지가 우선 보여져야되니깐 나오는거고 위에 링크중에

a href="guide.php" target="about" 부분의 이미지를 클릭하면 guide.php 의 페이지가

나오는것이죠 ~

<아이프레임 소스>

<iframe src="about.php" style="width:100%" onload=syncheight(this) scrolling="no"  frameborder="0"  marginheight="0" marginwidth="0" name="about"></iframe>

요게다 한페이지에 들어가는겁니다

많은 분들이 퍼가주셔서 상세하게 다시 적었습니다~ 그럼..

[출처] 아이프레임 사이즈 자동조절|작성자 슈히