아이프레임 높이 자동 늘이기

yyymin · Post by **yyymin** » 2005 07 19 18:29 18

아이프레임으로 문서를 불러올때
예로 블로그를 불러올때 그길이 만큼 높이가 늘어나게 할려고
하는데요 잘안되네요
아이프레임도 스크롤바가 있지만 사용안하고 불러들인
문서 자체 스크롤바가 늘어나게 하고싶은데
검색해봐도 안나오는데 방법좀 알려주세요 ^^

소프트원트 · Post by **소프트원트** » 2005 07 19 21:15 08

yyymin wrote:아이프레임으로 문서를 불러올때
예로 블로그를 불러올때 그길이 만큼 높이가 늘어나게 할려고
하는데요 잘안되네요
아이프레임도 스크롤바가 있지만 사용안하고 불러들인
문서 자체 스크롤바가 늘어나게 하고싶은데
검색해봐도 안나오는데 방법좀 알려주세요 ^^

아이프레임의 scroll옵션을 없애주면 되지않나요?

소프트원트 · Post by **소프트원트** » 2005 07 19 21:42 11

테스트해보니, 안되는군요. iframe 인라인요소라서 block처리해도 마찬가지이내요.

iframe이 기존 문서를 재사용하려 하는 것이라면, 스크립언어에서 지원하는 인클루드 방법을 쓰는 게 좋지않나 합니다. 아래는 php에서 사용하는 방법입니다.

Code: Select all

<? inlcude('file.htm'); ?>

소프트원트 · Post by **소프트원트** » 2005 07 19 22:04 45

yyymin wrote:아이프레임으로 문서를 불러올때
예로 블로그를 불러올때 그길이 만큼 높이가 늘어나게 할려고
하는데요 잘안되네요
아이프레임도 스크롤바가 있지만 사용안하고 불러들인
문서 자체 스크롤바가 늘어나게 하고싶은데
검색해봐도 안나오는데 방법좀 알려주세요 ^^

아래 링크에서 스크립트 소스를 활용하시면 되겠내요.

iframe 높이 자동 조절하기

step1의 내용을 head에 넣고 step2는 iframe이 삽입될 body내에 어딘가에 넣어주시면 됩니다. 그리고 원하는 소스를 조정해주면 되겠죠.

yyymin · Post by **yyymin** » 2005 07 20 18:30 10

알려주신 대로 해봐도 늘어지가 않네요
스크롤no 인데도 아이프레임박스에 스크롤 마져 생겨버리네요
ie ff 둘다 안되는데 해결이 안되네요

지기지 · Post by **지기지** » 2005 07 21 09:14 52

iframe.html

Code: Select all

<!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>

contents.html

Code: Select all

<!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>

중요한 부분은 document.documentElement.scrollTop 입니다.

doctype 이 선언이 되면 일반적으로 사용하는 document.body.scrollTop 이

항상 0 을 return 합니다.

브라우저에 따라서 값을 보정을 해 주어야 합니다.

..

yyymin · Post by **yyymin** » 2005 07 21 19:42 45

일반 html 에서 스크립트를 넣고 불러오니 잘되네요
제경우엔 게시판과블로그를 불러오고 싶은데
이경우에는 어떤식으로 스크립트를 넣어줘야 하는지
제로보드에서는 관리자페이지 하단에 소스넣는곳에 넣어봤는데
늘어나기는 하는데 창크기에 따라 아랫부분이 잘리네요
불러올페이지는 그냥두고 불러들일 페이지 자체에서 맞출수는 없는지
아이프레임도 표준에선 배제하는 항목인지 궁금합니다

순수 · Post by 순수 » 2005 07 22 19:48 25

아래소스가 되긴 하는데...
ie에서는 잘 되는데..
모질라에서는 스크롤이 생기는 군요..;;
도움이 안되실듯..;;
---------------------------------------------------------------

Code: Select all

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

yyymin · Post by **yyymin** » 2005 07 22 23:17 12

방법이 없다면 궁극의 새창띄우기로 해결을;;
답글감사합니다^^

yser · Post by **yser** » 2005 07 23 23:16 45

미니위니에서 알릭 님이 좋은 소스를 공개 하셨더군요.

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 은 문서 안에 가상으로 문서를 만드는 것이기 때문에 문서의 구조화를 뭉개어버리는 원인이 됩니다. 그 점은 알고 계시고 사용 하세요.

나뤼 · Post by 나뤼 » 2005 08 16 14:16 10

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.
}

Mozilla 한국 커뮤니티

아이프레임 높이 자동 늘이기

아이프레임 높이 자동 늘이기

Re: 아이프레임 높이 자동 늘이기

Re: 아이프레임 높이 자동 늘이기

감사합니다 ^^

간단한 소스입니다.

iframe 포함하는 페이지에서 사이즈 조절하

iframe 높이 자동늘이기

Who is online