아이프레임 높이 자동 늘이기
-
- 게시물: 39
- 참여됨: 2003 09 26 20:33 20
- 연락:
아이프레임 높이 자동 늘이기
아이프레임으로 문서를 불러올때
예로 블로그를 불러올때 그길이 만큼 높이가 늘어나게 할려고
하는데요 잘안되네요
아이프레임도 스크롤바가 있지만 사용안하고 불러들인
문서 자체 스크롤바가 늘어나게 하고싶은데
검색해봐도 안나오는데 방법좀 알려주세요 ^^
예로 블로그를 불러올때 그길이 만큼 높이가 늘어나게 할려고
하는데요 잘안되네요
아이프레임도 스크롤바가 있지만 사용안하고 불러들인
문서 자체 스크롤바가 늘어나게 하고싶은데
검색해봐도 안나오는데 방법좀 알려주세요 ^^
Re: 아이프레임 높이 자동 늘이기
아이프레임의 scroll옵션을 없애주면 되지않나요?yyymin 씀:아이프레임으로 문서를 불러올때
예로 블로그를 불러올때 그길이 만큼 높이가 늘어나게 할려고
하는데요 잘안되네요
아이프레임도 스크롤바가 있지만 사용안하고 불러들인
문서 자체 스크롤바가 늘어나게 하고싶은데
검색해봐도 안나오는데 방법좀 알려주세요 ^^
Re: 아이프레임 높이 자동 늘이기
아래 링크에서 스크립트 소스를 활용하시면 되겠내요.yyymin 씀:아이프레임으로 문서를 불러올때
예로 블로그를 불러올때 그길이 만큼 높이가 늘어나게 할려고
하는데요 잘안되네요
아이프레임도 스크롤바가 있지만 사용안하고 불러들인
문서 자체 스크롤바가 늘어나게 하고싶은데
검색해봐도 안나오는데 방법좀 알려주세요 ^^
iframe 높이 자동 조절하기
step1의 내용을 head에 넣고 step2는 iframe이 삽입될 body내에 어딘가에 넣어주시면 됩니다. 그리고 원하는 소스를 조정해주면 되겠죠.
간단한 소스입니다.
iframe.html
contents.html
중요한 부분은 document.documentElement.scrollTop 입니다.
doctype 이 선언이 되면 일반적으로 사용하는 document.body.scrollTop 이
항상 0 을 return 합니다.
브라우저에 따라서 값을 보정을 해 주어야 합니다.
..
코드: 모두 선택
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<title>Test</title>
</head>
<body>
<iframe id="ifrm" src="contents.html"></iframe>
</body>
</html>
코드: 모두 선택
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<title>Test</title>
<script type="text/javascript">
window.onload = function() {
var oBody = document.documentElement; // <html>
var h = oBody.scrollHeight; // height
var objFrm = top.window.document.getElementById("ifrm"); // <iframe>
if(isNaN(h))
objFrm.style.height = h;
else
objFrm.style.height = h+'px';
}
</script>
</head>
<body>
<p style="height:400px;">iframe 자동 높이 조정용 테스트 문서입니다.</p>
</body>
</html>
doctype 이 선언이 되면 일반적으로 사용하는 document.body.scrollTop 이
항상 0 을 return 합니다.
브라우저에 따라서 값을 보정을 해 주어야 합니다.
..
-
- 게시물: 39
- 참여됨: 2003 09 26 20:33 20
- 연락:
iframe 포함하는 페이지에서 사이즈 조절하
아래소스가 되긴 하는데...
ie에서는 잘 되는데..
모질라에서는 스크롤이 생기는 군요..;;
도움이 안되실듯..;;
---------------------------------------------------------------
ie에서는 잘 되는데..
모질라에서는 스크롤이 생기는 군요..;;
도움이 안되실듯..;;
---------------------------------------------------------------
코드: 모두 선택
var iframeids=["contentIFrame"] // iframe 에 사용할 ID 를 지정 해 주세요
var iframehide="yes"
function resizeCaller() {
var dyniframe=new Array();
dyniframe = document.getElementsByTagName("IFRAME");
//for (i=0; i<iframeids.length; i++) {
for (i=0; i<dyniframe.length; i++) {
if (document.getElementById) {
//resizeIframe(iframeids[i]);
resizeIframe("contentIFrame"+i);
}
if ((document.all || document.getElementById) && iframehide=="no") {
//var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]);
var tempobj=document.all? document.all["contentIFrame"+i] : document.getElementById("contentIFrame"+i);
tempobj.style.display="block";
}
}
try{
setTimeout ("resizeCaller()", 1000);
}catch(e){}
}
function resizeIframe(frameid) {
try{
var currentfr=document.getElementById(frameid);
if (currentfr && !window.opera) {
currentfr.style.display="block";
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight;
} else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
}
if (currentfr.addEventListener) {
currentfr.addEventListener("load", readjustIframe, false);
} else if (currentfr.attachEvent) {
currentfr.detachEvent("onload", readjustIframe) // THIS ONE
currentfr.attachEvent("onload", readjustIframe);
}
}
}catch(e){}
}
function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt;
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement;
if (iframeroot) {
resizeIframe(iframeroot.id);
}
}
function loadintoIframe(iframeid, url) {
if (document.getElementById) {
document.getElementById(iframeid).src=url;
}
}
if (window.addEventListener) {
window.addEventListener("load", resizeCaller, false);
} else if (window.attachEvent) {
window.attachEvent("onload", resizeCaller);
} else {
window.onload=resizeCaller;
}
-
- 서포터즈
- 게시물: 52
- 참여됨: 2005 01 28 11:12 17
- 연락:
미니위니에서 알릭 님이 좋은 소스를 공개 하셨더군요.
http://miniwini.com/miniwinis/bbs/index ... d=4369&p=1
참고해 보시길 바랍니다.
IE/FF 다 지원이라네요.
p.s
iframe 은 XHTML 에서 삭제 대상 항목입니다. img 도 마찬가지입니다.
한 때 iframe 을 쓰면 브라우저가 버벅대고 익스는 죽는 등의 현상도 있고 비표준 어쩌느니 하며 넷스 파에서 저주하는 듯한 반대도 있었습니다만, 몇 년이 지나자 아주 자연스레 당연한 듯이 쓰이고 있습니다. 스크롤 문제나 포커스 문제 등은 익스에서 편법으로 해결하긴 했습니다만.. 네이버에선 iframe 을 남용하고 있습니다. (다음 카페도 비슷합니다. 그래서 버벅거리는 게 심합니다. P4 3G + 512MB 의 컴에서도 카페 들어가면 무척 버벅 거립니다. activex, flash 의 문제도 있지만, 남용으로 인한 시간 낭비도 무시 못할 수준)
iframe 은 정말 어쩔 수 없을 때만 쓰시고요.
html/xhtml 가 '문서' 개념으로 취급되는 것이라 봤을 때, iframe 은 문서 안에 가상으로 문서를 만드는 것이기 때문에 문서의 구조화를 뭉개어버리는 원인이 됩니다. 그 점은 알고 계시고 사용 하세요.
http://miniwini.com/miniwinis/bbs/index ... d=4369&p=1
참고해 보시길 바랍니다.
IE/FF 다 지원이라네요.
p.s
iframe 은 XHTML 에서 삭제 대상 항목입니다. img 도 마찬가지입니다.
한 때 iframe 을 쓰면 브라우저가 버벅대고 익스는 죽는 등의 현상도 있고 비표준 어쩌느니 하며 넷스 파에서 저주하는 듯한 반대도 있었습니다만, 몇 년이 지나자 아주 자연스레 당연한 듯이 쓰이고 있습니다. 스크롤 문제나 포커스 문제 등은 익스에서 편법으로 해결하긴 했습니다만.. 네이버에선 iframe 을 남용하고 있습니다. (다음 카페도 비슷합니다. 그래서 버벅거리는 게 심합니다. P4 3G + 512MB 의 컴에서도 카페 들어가면 무척 버벅 거립니다. activex, flash 의 문제도 있지만, 남용으로 인한 시간 낭비도 무시 못할 수준)
iframe 은 정말 어쩔 수 없을 때만 쓰시고요.
html/xhtml 가 '문서' 개념으로 취급되는 것이라 봤을 때, iframe 은 문서 안에 가상으로 문서를 만드는 것이기 때문에 문서의 구조화를 뭉개어버리는 원인이 됩니다. 그 점은 알고 계시고 사용 하세요.
iframe 높이 자동늘이기
IE , NN , FF 다 됩니다
(각각의 테스트 버전은 6.0 7.0 1.04)
아래 소스가 약간 문제가 하나 있는데요 IE 에서는 onload 이외에 onresize에서도
작동하는데...
FF 에서는 onload에서밖에 작동하지 않는군요...
예를들면 크기가 있는 (0이 아닌) div의 style.display 속성을 none 또는 block 으로 바꿀 경우에도 IE는 아래 스크립트를 실행하는데.. FF는 어찌된일인지 실행이 안됩니다.
그거 빼고는 대략...
아! iframe의 id를 하나로 통일시켜야하신다는 제약사항이 있네요.
// Resizing the IFRAME. which itself belongs to. which itself display through.
function resize_iframe()
{
parent.document.getElementById("contentIF").style.height = document.body.scrollHeight+15;
}
///////////////////////////////////////////////////////////////////////
// Register Event Handlers.. about the resizing of the document size.
///////////////////////////////////////////////////////////////////////
// If the Document is on the IFRAME...
if ( self != top )
{
// if... MicroSoft Internet Explorer...
if ( navigator.userAgent.indexOf("MSIE") != -1 )
{
document.body.onload = resize_iframe;
document.body.onresize = resize_iframe;
}
// if... the browser is Firefox...
else if ( navigator.userAgent.indexOf("Firefox") != -1 )
{
window.onload = new Function("parent.document.getElementById('contentIF').style.height = document.body.scrollHeight+15");
window.onresize = new Function("parent.document.getElementById('contentIF').style.height = document.body.scrollHeight+15");
}
else
{
window.onload = new Function("parent.document.getElementById('contentIF').style.height = document.body.scrollHeight+15");
window.onresize = new Function("parent.document.getElementById('contentIF').style.height = document.body.scrollHeight+15");
}
}
else {
// If.... whole document needed... reload the document which includes iframe tag.
}
(각각의 테스트 버전은 6.0 7.0 1.04)
아래 소스가 약간 문제가 하나 있는데요 IE 에서는 onload 이외에 onresize에서도
작동하는데...
FF 에서는 onload에서밖에 작동하지 않는군요...
예를들면 크기가 있는 (0이 아닌) div의 style.display 속성을 none 또는 block 으로 바꿀 경우에도 IE는 아래 스크립트를 실행하는데.. FF는 어찌된일인지 실행이 안됩니다.
그거 빼고는 대략...
아! iframe의 id를 하나로 통일시켜야하신다는 제약사항이 있네요.
// Resizing the IFRAME. which itself belongs to. which itself display through.
function resize_iframe()
{
parent.document.getElementById("contentIF").style.height = document.body.scrollHeight+15;
}
///////////////////////////////////////////////////////////////////////
// Register Event Handlers.. about the resizing of the document size.
///////////////////////////////////////////////////////////////////////
// If the Document is on the IFRAME...
if ( self != top )
{
// if... MicroSoft Internet Explorer...
if ( navigator.userAgent.indexOf("MSIE") != -1 )
{
document.body.onload = resize_iframe;
document.body.onresize = resize_iframe;
}
// if... the browser is Firefox...
else if ( navigator.userAgent.indexOf("Firefox") != -1 )
{
window.onload = new Function("parent.document.getElementById('contentIF').style.height = document.body.scrollHeight+15");
window.onresize = new Function("parent.document.getElementById('contentIF').style.height = document.body.scrollHeight+15");
}
else
{
window.onload = new Function("parent.document.getElementById('contentIF').style.height = document.body.scrollHeight+15");
window.onresize = new Function("parent.document.getElementById('contentIF').style.height = document.body.scrollHeight+15");
}
}
else {
// If.... whole document needed... reload the document which includes iframe tag.
}
누군가 접속
유저들이 이 포럼을 탐색중: 가입된 유저 없음 그리고 2 손님들