2006년 02월 15일
FF,OP,IE 아이프레임(iframe)의 컨텐츠 높이 구하기, 리사이즈
iframe의 id가 ifrView 일경우 아래의 소스로 컨텐츠의 높이를 구할 수 있습니다.

var the_height = document.getElementById('ifrView').contentWindow.document.body.scrollHeight

불여우, 오페라, IE 모두 잘 되는 것을 확인했습니다.
불여우의 자바스크립트 콘솔에 아무런 오류 메세지도 없으니 맘편히 쓰셔도 되겠습니다.

크기를 조절하시려면 아래 소스처럼 하시면 됩니다.

document.getElementById('the_iframe').height = the_height;

너무 간단해서 의심까지 했습니다.;;
크로스브라우징을 위한 각종 복잡한 소스보다가 이거 보고나니 좀 허탈 하군요.

아래처럼 함수로 만들어서 사용하시면 됩니다.


function IframeResize(id){
    var ifrm = document.getElementById(id);
    var the_height = ifrm.contentWindow.document.body.scrollHeight;
    ifrm.height = the_height;
}



IE에서는 document.body.clientHeight 로 높이를 알아낼 수 있었는데
불여우에서는 window.innerHeight 와 document.documentElement.clientHeight 둘다 컨텐츠의 높이를 구할 수가 없었습니다.

제가 정보를 얻은 사이트의 주소 입니다. http://guymal.com/mycode/iframe_size/
by -A2- | 2006/02/15 07:56 | 개발/플밍 | 트랙백 | 덧글(6)
트랙백 주소 : http://ani2life.egloos.com/tb/2203595
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
Commented by 마이해피 at 2006/02/15 13:41
엇. 정말 유용한 팁입니다. 추천 백만개~!!
Commented by -A2- at 2006/02/15 14:03
마이해피// 붐업 안될까요? ㅎㅎ
Commented by pilza2 at 2006/02/16 09:56
iframe 써도 되는 거예요?
어디선가 xhtml에서 iframe 쓰지 말라는 글을 본 것 같은데…… 제가 잘못 본 건가보죠.
Commented by -A2- at 2006/02/16 11:10
pilza2// 되도록 쓰지 않는 것이 좋습니다. xhtml 1.1부터는 배제되어 있구요.
일반적인 정보를 얻는데 필요한 웹페이지는 자바스크립트가 동작하지 않고 이미지가 없더라도 정보를 얻을 수 있도록 웹접근성을 높여줘야 합니다. 아이프레임은 웹접근성을 크게 떨어뜨립니다.

하지만 단순한 웹페이지 이상의 특정 프로그램으로써 동작하여야 할때 아이프레임이 필요할 때가 있습니다.
예를들면 검색엔진의 검색창에 몇단어를 입력했을때 추천단어가 출력되는 기능이 있습니다.
이 기능은 굳이 없더라도 웹페이지를 검색하고 정보를 얻는데 문제가 없습니다.
서비스 측면에서 제공되는 것이지 이 기능을 쓰지 못함으로 인해서 웹접근성이 떨어지는 것은 아닙니다.

아이프레임을 대체할 방법으로 괜찮은 기술이 Ajax 이구요.
제가 이번에 아이프레임에 대한 정보를 찾게된 이유는 채팅 프로그램 구현시 레이어만으로는 새로운 글이 입력되었을때 하단 스크롤을 할 방법이 없어서 글 출력 부분은 아이프레임을 쓸 수 밖에 없었습니다.

아이프레임의 사용여부에 대해서 도움이 되셨나요? :)
Commented by 나그네 at 2008/05/21 14:17
^^*
Commented by -A2- at 2008/05/21 14:56
나그네// ^^

:         :

:

비공개 덧글



<< 이전 페이지 | 다음 페이지 >>