NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


콘텐트의 높이에 따라 자동으로 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 크로스 브라우징을 확인 하였습니다.

참조

분류: 자바스크립트 | 2007년 12월 12일, 23:55 | 정찬명 | 댓글: 33개 |
트랙백URI - http://naradesign.net/wp/2007/12/12/129/trackback/

33개의 댓글이 있습니다.

  1. funny4u 댓글:

    근 3달만이네요 ^_^ (저도 그정도 쉬고 있는데..슬슬 복귀 해야겠습니다)
    좋은 글 감사합니다~

  2. 정찬명 댓글:

    3개월만에 포스팅 한것 뽀록 난건가요 ㅡㅡ; 좋은하루 되세요.^^

  3. Antiterror 댓글:

    iframe도 사용될때가 있나보죠!?

    전 접근성 때문에 프레임, 아이프레임은 항상 저 멀리 해 두는데…

  4. 정찬명 댓글:

    네, 이런저런 이유로 의지와 관계없이 사용될 때가 있네요 ㅡㅡ; 주로 개발편의 때문이죠 뭐.

  5. 정찬명 댓글:

    이 코드는 Validation 검사시 오류가 나는군요. iframe 에 onload 라는 속성을 사용한 것이 문제가 되네요. ㅡㅡ;

  6. 희주 댓글:

    저도 작년초에 이와 같은 스크립트를 만든적이 있었습니다.
    제가 만든건 iframe되는 문서에서 스크립트를 로드하는 거였습니다.
    로드하면 iframe하는 문서로 높이값등을 전달하는 것이었죠.

    이 녀석을 밤새 고민해서 만들긴했는데
    IE에서는 완벽히 동작하지만 FF에서는 좀 이상하더군요..
    또 고민해서 IE와 FF에서 완벽 동작하는 스크립트를 완성 시켰습니다.
    그런데 오페라에서 문제가 발생하였습니다.
    IFRAME 높이 조절이 되기는 하는데 내용이 많아 길이가 긴 문서에서 짧은 문서로 올때 높이 조절이 되지 않더군요..–
    큰문제는 아니었지만 그런 문서에서는 페이지 하단으로 가려면 엄청난 스크롤을 해야 했습니다..

    또 고민하다가 “에이 이 홈페이지에 오페라로 들어올 사람이 몇이나 있겠어”생각하며 그냥 만들었던 기억이..–

  7. astraea 댓글:

    예전에 저 문제로 무지무지 고생했던 기억이 나네요-_ㅠ
    js 찾아 헤매고 헤매다 겨우 찾았던;
    저것과는 살짝 달랐던거 같지만요a
    js cross browsing 은 너무 어렵;

  8. 정찬명 댓글:

    희주님 안녕하세요? 이름이 익숙해서 블로그에 방문해 보았더니 제가 생각하던 희주님이 맞으시네요.^^ 아무쪼록 잘 마무리 되셨길 빕니다.

    한편, 제가 올린 스크립트도 전혀 문제가 없지는 않아 보입니다. 브라우저에 따라 콘텐츠 양만큼 정확하게 프레임 높이를 계산하지 못하는 경우가 자주 보이는것 같습니다. 그저 참고만 해주세요^^

  9. 정찬명 댓글:

    astraea님 안녕하세요? 저는 크로스브라우징은 둘째치고 Javascript/DOM 코드 처리하시는 분들 너무 부러워요 ㅎㅎ

  10. astraea 댓글:

    전 copy paste 할뿐입니다-_-;;;
    다행히? 별로 웹프로그래밍을 할 일이 없어서..(평범유저니까요..=3=3)

  11. 정순열 댓글:

    정찬명님께 문의 드립니다.
    아래의 연락처로 전화 한통 주시면 감사하겠습니다.
    010-2521-1331

  12. 정찬명 댓글:

    정순열님, 안녕하세요? 이메일로 문의 주시면 안될까요? dece24앳gmail.com

  13. 쭈쭈 댓글:

    제가 자주 쓰는 방법인데 일주일 만에 홈페이지 하나 만들어 달라고 하면

    디자이너가 던져준 것에 iframe으로 도배를 해서 리사이즈 해버리죠

    게시판이런거 넣을때 편리해요.. 하지만 만들어주고 나서 미안하죠;

  14. 안토니오 댓글:

    감사합니다. 다른거는 전부 안되던데.. 이거는 되네요.. 너무 감사합니다.
    자주 오겠습니다.

  15. 쏘리쏘리 댓글:

    저 같은경우는 웹표준에도 어긋나지 않게 .. 해당 iframe에 호출되는 body 에서 함수를 온로드 하여 해결했습니다.

    iframe 설정 페이지 :

    function f_resizeHeight(height) {
    document.getElementById(“iframe네임”).style.height = height+’px’;
    }

    iframe으로 로딩된 페이지 : (+10은 브라우저마다 유격이 있으므로 ^^)

  16. 정찬명 댓글:

    @쏘리쏘리
    네, 사실 iframe 에 onload 속성은 허용되지 않는 속성이죠. ^^; 감사합니다.

  17. 황준상 댓글:

    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);

    전이런식으로 사용했는데.. 방법은 많군요..

  18. 정찬명 댓글:

    @황준상
    감사합니다. 여러가지 코드 레퍼런스가 있네요. ^^

  19. 익명 댓글:

    아…이것때문에 엄청 헤매고 있었는데 절 구해주셨습니다 갑사합니다ㅠㅠㅠㅠ

  20. 정찬명 댓글:

    @익명
    스크립트 포함 위치에 따라 방법이 두 가지가 있으니 기호에 맞게 사용할 수 있겠네요. http://blog.naver.com/PostView.nhn?blogId=kyo1230&logNo=140168019949

  21. 익명 댓글:

    @정찬명님
    에고…제가 어설프게 짜깁기로 해 보는 초보라 추천해주신 건 어떻게 하는지 잘 모르겠네요^^;
    헌데 한 번 늘어난 프레임이 줄어들지를 않는데 이건 어찌 해야 할 지 혹시 가르쳐주실 수 있을지요..?ㅠㅠ

  22. 정찬명 댓글:

    @익명
    로컬에서는 실행이 안되는게 정상입니다. 웹 서버에 올려놓고 http:// 또는 https:// 연결한 상태에서 테스트해 보세요. 만약 이 문제가 아니라면 댓글에 접근할 수 있는 URL을 남겨보세요. 보지 않고는 저도 잘 모릅니다.

  23. 다니엘정가 댓글:

    sir에서 타고타고 여기서 답 찾았어요~
    감사합니다.~복 받으세용~

  24. 류중근 댓글:

    이 글이 저의 인터넷 생활에서 여러모로 도움이 되었습니다.
    고맙다는 말 남기면서 물러갈게요.
    그대에게 매사에 행복한 생활 펼져지기를…

  25. 익명 댓글:

    정말 유용한 글 감사합니다. ^^

  26. […] 본문 건너 뛰기 […]

  27. 익명 댓글:

    ㅜㅜ iframe 그냥 자식창에서 전체 height 길이 가져와서 부모창에 보내면 되는데요 ㅜㅜ

  28. 익명 댓글:

    필요하신 분 계시면 메일 주세요.. mocogi@naver.com

  29. my24.cc 댓글:

    epibatiga ploia

  30. Ακτοπλοϊκά ταξίδια

  31. Passenger ships Ancona Patras

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님