콘텐트의 높이에 따라 자동으로 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
제가 자주 쓰는 방법인데 일주일 만에 홈페이지 하나 만들어 달라고 하면
디자이너가 던져준 것에 iframe으로 도배를 해서 리사이즈 해버리죠
게시판이런거 넣을때 편리해요.. 하지만 만들어주고 나서 미안하죠;
감사합니다. 다른거는 전부 안되던데.. 이거는 되네요.. 너무 감사합니다.
자주 오겠습니다.
저 같은경우는 웹표준에도 어긋나지 않게 .. 해당 iframe에 호출되는 body 에서 함수를 온로드 하여 해결했습니다.
iframe 설정 페이지 :
function f_resizeHeight(height) {
document.getElementById(“iframe네임”).style.height = height+’px’;
}
iframe으로 로딩된 페이지 : (+10은 브라우저마다 유격이 있으므로 ^^)
@쏘리쏘리
네, 사실 iframe 에 onload 속성은 허용되지 않는 속성이죠. ^^; 감사합니다.
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != “function”){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
function resize(){
var height = document.body.scrollHeight;
parent.document.getElementById(“iframeID”).style.height = height + 50 + “px”;
}
addLoadEvent(resize);
전이런식으로 사용했는데.. 방법은 많군요..
@황준상
감사합니다. 여러가지 코드 레퍼런스가 있네요. ^^