YesYo.com MintState Forums
뒤로    YesYo.com MintState BBS > Tech > Javascript
검색
멤버이름    오토
비밀번호 
 

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

페이지 정보

작성자 MintState 댓글 0건 조회 15,087회 작성일 11-04-11 16:13

본문

파이어폭스, 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는 자바스크립트에서 사용되며 반드시 이 둘은 일치해야한다.
첨부 파일
파일 종류: png 파폭아이프레임.png (9.9K, 59 views)

댓글목록

등록된 댓글이 없습니다.

Total 178건 2 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
158 MintState 16366 01-13
157 MintState 16359 11-17
156 MintState 16291 02-13
155 MintState 16151 11-17
154 MintState 16145 11-17
153 MintState 16140 11-17
152 MintState 16131 01-05
151 MintState 16092 11-17
150 MintState 15989 10-31
149 MintState 15956 11-17
148
세로롤링 댓글+ 1
MintState 15891 11-17
147 MintState 15875 11-17
146 MintState 15627 10-31
145 MintState 15607 04-29
144 MintState 15593 02-05
143 MintState 15574 11-17
142 MintState 15415 10-23
141 MintState 15330 11-17
140 MintState 15275 03-11
열람중 MintState 15088 04-11
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2024, YesYo.com MintState. ™