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

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

페이지 정보

작성자 MintState 댓글 0건 조회 9,644회 작성일 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, 16 views)

댓글목록

등록된 댓글이 없습니다.

Total 177건 1 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
177 MintState 312 07-24
176 MintState 522 04-19
175 MintState 1345 11-02
174 MintState 1249 10-27
173 MintState 1320 09-26
172 MintState 1994 03-08
171 MintState 2423 11-14
170 MintState 2364 07-01
169 MintState 3360 03-05
168 MintState 4319 11-19
열람중 MintState 9645 04-11
166 MintState 8435 04-06
165 MintState 8549 07-23
164 MintState 8496 06-09
163 MintState 10263 04-29
162 MintState 11566 04-29
161 MintState 8915 04-16
160 MintState 14842 02-17
159 MintState 15121 01-19
158 MintState 11264 10-27
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2018, YesYo.com MintState. ™