콘텐트의 높이에 따라 자동으로 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 크로스 브라우징을 확인 하였습니다.
참조
'프로그램&DB > jQuery&JS' 카테고리의 다른 글
| [javascript] replaceAll 구현 by 앙마의 날개님 (0) | 2014.07.17 |
|---|---|
| 동적 ad 노출 모듈 (0) | 2012.10.20 |
| jQuery $(document).ready 다시보기 by 제디슨님 (0) | 2012.09.20 |
| JQuery 사용해보기 - 엘리먼트 다루기 by naearu님 (0) | 2012.01.05 |
| jQuery.classBehaviours.handlers.layerPopUp 레이어 팝업 (0) | 2011.12.12 |