아이프레임(iframe) 자동 리사이즈

※ 내용 업데이트와 홈페이지 관리 다시 시작하겠습니다. ^^;

아이프레임에 불러온 페이지 높이를 파악하여 아이프레임의 높이를 조절 하면
하나의 페이지 처럼 보이게 됩니다.

그 아이프레임의 높이를 자동으로 조절해 보는 예제입니다.

주의) 아이프레임에 불려진 페이지가 같은 도메인의 페이지가 아니라면 조절할 수 없습니다.

운영하는 블로그에 아이프레임으로 포탈사이트를 불러온 후 자동 리사이즈 이런것 안됩니다. ^^;
같은 도메인이라도 www 가 있고 없고에 따라 안됩니다.
상대경로로 불러오는 방법을 사용하세요~

파이어폭스 에서는 한번 늘어난 프레임이 다시 줄어들지 않는 문제가 있네요~
이 방법말고 다른 소스도 있는데 정리해서 올려보겠습니다 ^^

예제

이 사이트의 내용중 특정한 페이지를 아이프레임에 불러왔습니다.

소스

이 사이트의 내용중 특정한 페이지를 아이프레임에 불러왔습니다.<br>
<iframe id="ifr1" width="950" height="300" src="view.php?seq=124" frameborder="0" scrolling="no"></iframe>

<script language="JavaScript">
<!--
	function autoSize(str){
		var obj = document.getElementById(str);
		try{ // 에러가 나더라도 무시하게 처리
			if(obj)obj.height = obj.contentWindow.document.body.scrollHeight;
		}catch(e){}
	}
	setInterval("autoSize('ifr1')", 50) // 계속 실행
//-->
</script>

이 사이트의 내용중 특정한 페이지를 아이프레임에 불러왔습니다.<br>
<iframe id="ifr1" width="950" height="300" src="view.php?seq=124" frameborder="0" scrolling="no"></iframe>

<script language="JavaScript">
<!--
	function autoSize(str){
		var obj = document.getElementById(str);
		try{ // 에러가 나더라도 무시하게 처리
			if(obj)obj.height = obj.contentWindow.document.body.scrollHeight;
		}catch(e){}
	}
	setInterval("autoSize('ifr1')", 50) // 계속 실행
//-->
</script>

☞ 달팽이홈2

등록일 : 2008-09-02