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

 
작성일 : 11-04-11 16:13
파이어폭스, IE에 모두 적용되는 iframe 태그
 글쓴이 : MintState
조회 : 8,391  
파이어폭스, 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, 10 views)
Rated 4.5/5 (90%) (2 Votes)

(\__/)
(='.'=)
(")_(")~
Search Infomation by MintState
MintState

 
 

Total 173
번호 제   목 글쓴이 날짜 조회
173 GIF 플레이어(제어) MintState 09-26 78
172 youtube ID 값 추출 MintState 03-08 512
171 Javascript - 비밀번호 유효성 검사(password validation) MintState 11-14 936
170 하단고정레이아웃 MintState 07-01 1064
169 highcharts MintState 03-05 2100
168 jQuery Masonry 갤러리 리스트 효과 MintState 11-19 3148
167 파이어폭스, IE에 모두 적용되는 iframe 태그 MintState 04-11 8392
166 롤링 위 아래 버튼 적용 MintState 04-06 6290
165 Select 객체 추가 삭제 MintState 07-23 7206
164 숫자에 컴마(,) 쓰고 한글로 숫자 표시 MintState 06-09 6775
163 object 속성보기 MintState 04-29 9026
162 비밀번호 보안등급 체크 (2) MintState 04-29 10039
161 기본 공통 스크립트 MintState 04-16 7510
160 textarea에 줄바꿈 금지와 글자수 제한 MintState 02-17 13458
159 JSON 객체를 String으로 변환하기 MintState 01-19 13872
158 Tooltip 풍선 도움말 MintState 10-27 9590
157 다중 셀렉트 기본 방법 MintState 10-23 7876
156 자바스크립트를 이용한 암호화 MintState 09-01 9039
155 모든 자바스크립트 에러 잠재우기 (에러 디버그) MintState 05-13 8326
154 레이어 팝업 (2) MintState 04-24 8053
 1  2  3  4  5  6  7  8  9  
모바일 버전으로 보기
CopyRight ©2004 - 2017, YesYo.com MintState. ™