본문 | 검색 | 글 분류 | 최근 글 | 최근 댓글 | 기타 | 아래로


콘텐트의 높이에 따라 자동으로 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 | 정찬명 | |
트랙백URI - http://naradesign.net/wp/2007/12/12/129/trackback/

12개의 댓글이 있습니다.

  1. funny4u 댓글 | 2007년 12월 13일, 14:15

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

  2. 정찬명 댓글 | 2007년 12월 14일, 3:12

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

  3. Antiterror 댓글 | 2007년 12월 21일, 21:08

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

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

  4. 정찬명 댓글 | 2007년 12월 21일, 22:00

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

  5. 정찬명 댓글 | 2008년 1월 18일, 22:54

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

  6. 희주 댓글 | 2008년 4월 2일, 13:05

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

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

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

  7. astraea 댓글 | 2008년 4월 2일, 14:01

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

  8. 정찬명 댓글 | 2008년 4월 2일, 14:04

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

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

  9. 정찬명 댓글 | 2008년 4월 2일, 14:11

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

  10. astraea 댓글 | 2008년 4월 2일, 14:48

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

  11. 정순열 댓글 | 2008년 8월 22일, 14:22

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

  12. 정찬명 댓글 | 2008년 8월 22일, 14:35

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

댓글 남기기.

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



본문 | 검색 | 글 분류 | 최근 글 | 최근 댓글 | 기타 | 위로