글
iframe을 부득이하게 사용하는 웹페이지를 만들다보면 iframe의 크기를 자꾸 바꿔줘야 하는 경우가 왕왕 발생한다.
다음의 예제는 iframe의 크기를 자동으로 바꿔주는 예제이다.
kurapa.com에도 적용해 보았는데, 잘 동작하는 것을 확인하였다.
<iframe id='ifrm'
frameborder=0
width=100%
height=450
scrolling=no
src='http://kurapa.com'
></iframe>
<script language='javascript'>
function getDocHeight(doc)
{
var docHt = 0, sh, oh;
if (doc.height)
{
docHt = doc.height;
}
else if (doc.body)
{
if (doc.body.scrollHeight) docHt = sh = doc.body.scrollHeight;
if (doc.body.offsetHeight) docHt = oh = doc.body.offsetHeight;
if (sh && oh) docHt = Math.max(sh, oh);
}
return docHt;
} function getReSize()
{
var iframeWin = window.frames['ifrm']; var iframeEl = window.document.getElementById? window.document.getElementById('ifrm'): document.all? document.all['ifrm']: null; if ( iframeEl && iframeWin )
{
var docHt = getDocHeight(iframeWin.document); if (docHt != iframeEl.style.height) iframeEl.style.height = docHt + 'px';
}
else
{ // firefox
var docHt = window.document.getElementById('ifrm').contentDocument.height;
window.document.getElementById('ifrm').style.height = docHt + 'px';
}
} function getRetry()
{
getReSize();
setTimeout('getRetry()',500);
}
getRetry();
</script>
다음의 예제는 iframe의 크기를 자동으로 바꿔주는 예제이다.
kurapa.com에도 적용해 보았는데, 잘 동작하는 것을 확인하였다.
<iframe id='ifrm'
frameborder=0
width=100%
height=450
scrolling=no
src='http://kurapa.com'
></iframe>
<script language='javascript'>
function getDocHeight(doc)
{
var docHt = 0, sh, oh;
if (doc.height)
{
docHt = doc.height;
}
else if (doc.body)
{
if (doc.body.scrollHeight) docHt = sh = doc.body.scrollHeight;
if (doc.body.offsetHeight) docHt = oh = doc.body.offsetHeight;
if (sh && oh) docHt = Math.max(sh, oh);
}
return docHt;
} function getReSize()
{
var iframeWin = window.frames['ifrm']; var iframeEl = window.document.getElementById? window.document.getElementById('ifrm'): document.all? document.all['ifrm']: null; if ( iframeEl && iframeWin )
{
var docHt = getDocHeight(iframeWin.document); if (docHt != iframeEl.style.height) iframeEl.style.height = docHt + 'px';
}
else
{ // firefox
var docHt = window.document.getElementById('ifrm').contentDocument.height;
window.document.getElementById('ifrm').style.height = docHt + 'px';
}
} function getRetry()
{
getReSize();
setTimeout('getRetry()',500);
}
getRetry();
</script>
'JS > etc' 카테고리의 다른 글
Ajax - innerHTML (0) | 2009.01.05 |
---|---|
innerHTML, innerText, outerHTML, outerText 비교하는 예 (0) | 2009.01.05 |
innerHTML의 한계와 해결 (0) | 2009.01.05 |
jQuery로 Ajax 개발을 단순화 하기 (0) | 2009.01.05 |
List of AJAX Start Page (0) | 2009.01.05 |
ajax를 이용한 파일 탐색기 (0) | 2009.01.05 |
PHP와 AJAX를 연동해보자 (0) | 2009.01.05 |
xml & javascript로 트리 메뉴 만들기 (0) | 2008.10.24 |
RECENT COMMENT