파이어폭스, IE에 모두 적용되는 iframe 태그

기존에 dtd 선언하지 않았을 경우 파폭에서도 잘 되었는데 dtd를 선언하니 리사이즈가 안되어 검색중 발견한 포스팅입니다.

출처 : http://icq4ever.webzero.co.kr/tt/521

iframe태그를 사용하면 원래 페이지 안에 또다른 웹페이지를 넣을수가 있는데
가로, 세로 사이즈를 적용하여 넣을 공간을 잡아주어야 한다.

사이즈는 px단위를 사용할수도 있고, 테이블의 셀이나 html등 넣을 위치의 전체 공간을 기준으로 %를 사용할수도 있다. 하지만 제로보드나 여타 게시판을 만약 삽입할 경우 사이즈가 정해진것이 아니어서 집어넣은 웹페이지가 사이즈를 초과할 경우 스크롤바가 나타나거나 짤릴수가 있다.

게다가 파이어폭스는 훨씬 심각하다.
html태그는 표준이 존재하기는 하지만 IE나 firefox, safari, mozilla등 많은 브라우저마다 적용되는 태그가 있고 그렇지 않은 태그가 있다. iframe도 마찬가지인데 .. 파이어폭스의 경우 사이즈를 정해놔도 조그만한 박스로만 나온다.

<iframe src=zero/zboard.php?id=guest name="myframe" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="no">

위소스를 사용하면 파이어폭스에서는 이렇게 나온다

이번에 후미진용 페이지를 만들면서 이리저리 소스를 찾아보다가 발견한 유용한 소스를 하나 소개한다.
자바스크립트를 사용하며, 웹브라우저 정보를 읽어들여 파이어폭스일경우에 별도의 함수를 사용하는듯 하다.

자바스크립트 부분

<script type="text/javascript">
var iframeids=["myframe"]
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=getFFVersion>=0.1? 16 : 20 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
	var dyniframe=new Array()
	for (i=0; i<iframeids.length; i++){
		if (document.getElementById)
			resizeIframe(iframeids[i])
		if ((document.all || document.getElementById) && iframehide=="no"){
			var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
			tempobj.style.display="block"
		}
	}
}

function resizeIframe(frameid){
	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+FFextraHeight; 
		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) // Bug fix line
			currentfr.attachEvent("onload", readjustIframe)
		}
	}
}

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
</script>

iframe 삽입 요령

<iframe id="myframe" src="삽입할 웹페이지" width="100%" frameborder="0"scrolling="no"></iframe>

iframe id는 자바스크립트에서 사용되며 반드시 이 둘은 일치해야한다.