콘텐트의 높이에 따라 자동으로 Resizing 되는 Iframe 만들기.
iframe 의 사용이 권장되는 것은 아니지만 간혹 사용되는 경우 컨텐트의 높이에 따라 자동으로 resizing 되도록 하는 방법은 사용성을 높여줍니다. iframe 내부의 콘텐트 높이가 동적으로 달라지는 경우 고정된 높이로는 이것을 담아낼 수 없기에 스크롤이 나타나도록 처리하는 방법 대신 프레임 콘텐트의 내용이 스크롤 없이 모두 출력될 수 있도록 해 주는것이 좋겠지요.
문서의 <head> 영역에 포함되어야 할 스크립트.
<script type="text/javascript">
// iframe resize
function autoResize(i)
{
var iframeHeight=
(i).contentWindow.document.body.scrollHeight;
(i).height=iframeHeight+20;
}
</script>
문서의 <iframe> 코드에 포함되어야 할 스크립트.
<iframe src="#iframeUrl" onload="autoResize(this)" scrolling="no" frameborder="0"></iframe>
기타
- 같은 도메인 URL을 지닌 iframe 콘텐트에만 이 스크립트를 사용할 수 있습니다.
- IE6~7, FF2, Opera9, Safari2~3 크로스 브라우징을 확인 하였습니다.
근 3달만이네요 ^_^ (저도 그정도 쉬고 있는데..슬슬 복귀 해야겠습니다)
좋은 글 감사합니다~
3개월만에 포스팅 한것 뽀록 난건가요 ㅡㅡ; 좋은하루 되세요.^^
iframe도 사용될때가 있나보죠!?
전 접근성 때문에 프레임, 아이프레임은 항상 저 멀리 해 두는데…
네, 이런저런 이유로 의지와 관계없이 사용될 때가 있네요 ㅡㅡ; 주로 개발편의 때문이죠 뭐.
이 코드는 Validation 검사시 오류가 나는군요. iframe 에 onload 라는 속성을 사용한 것이 문제가 되네요. ㅡㅡ;
저도 작년초에 이와 같은 스크립트를 만든적이 있었습니다.
제가 만든건 iframe되는 문서에서 스크립트를 로드하는 거였습니다.
로드하면 iframe하는 문서로 높이값등을 전달하는 것이었죠.
이 녀석을 밤새 고민해서 만들긴했는데
IE에서는 완벽히 동작하지만 FF에서는 좀 이상하더군요..
또 고민해서 IE와 FF에서 완벽 동작하는 스크립트를 완성 시켰습니다.
그런데 오페라에서 문제가 발생하였습니다.
IFRAME 높이 조절이 되기는 하는데 내용이 많아 길이가 긴 문서에서 짧은 문서로 올때 높이 조절이 되지 않더군요..–
큰문제는 아니었지만 그런 문서에서는 페이지 하단으로 가려면 엄청난 스크롤을 해야 했습니다..
또 고민하다가 “에이 이 홈페이지에 오페라로 들어올 사람이 몇이나 있겠어”생각하며 그냥 만들었던 기억이..–
예전에 저 문제로 무지무지 고생했던 기억이 나네요-_ㅠ
js 찾아 헤매고 헤매다 겨우 찾았던;
저것과는 살짝 달랐던거 같지만요a
js cross browsing 은 너무 어렵;
희주님 안녕하세요? 이름이 익숙해서 블로그에 방문해 보았더니 제가 생각하던 희주님이 맞으시네요.^^ 아무쪼록 잘 마무리 되셨길 빕니다.
한편, 제가 올린 스크립트도 전혀 문제가 없지는 않아 보입니다. 브라우저에 따라 콘텐츠 양만큼 정확하게 프레임 높이를 계산하지 못하는 경우가 자주 보이는것 같습니다. 그저 참고만 해주세요^^
astraea님 안녕하세요? 저는 크로스브라우징은 둘째치고 Javascript/DOM 코드 처리하시는 분들 너무 부러워요 ㅎㅎ
전 copy paste 할뿐입니다-_-;;;
다행히? 별로 웹프로그래밍을 할 일이 없어서..(평범유저니까요..=3=3)
정찬명님께 문의 드립니다.
아래의 연락처로 전화 한통 주시면 감사하겠습니다.
010-2521-1331
정순열님, 안녕하세요? 이메일로 문의 주시면 안될까요? dece24앳gmail.com