sitelink1 | |
---|---|
sitelink2 | |
sitelink3 | |
sitelink4 | http://1 |
extra_vars4 | ko |
extra_vars5 | http://overfloweb.com/zbxe/?mid=study&category=363&document_srl=741 |
extra_vars6 | sitelink1 |
1. Inner page 에서 parent 에 접근하여 사이즈를 넘기는 방식 (link)
test browser : ie6, ie7, firefox 3, safari 3, chrome, opera 9
parent :
...<iframe id="contentFrame" name="contentFrame" src="about:blank" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>...
iframe :
...<div id="content">... contents ...</div>...<script type="text/javascript">function init(){var doc = document.getElementById('content');if(doc.offsetHeight == 0){} else {pageheight = doc.offsetHeight;parent.document.getElementById("contentFrame").height = pageheight+"px";}}window.onload = function(){init();}</script>...
iframe 안의 소스에서 내용이 들어가는 전체를 <div id="content"></div> 로 감싸고,
onload 이벤트로 그 div 의 dom.offsetHeight 를 구해서 parent.iframe 의 height 를 바꿔주는 방식이다.
붉은색으로 표시된 height 가 크로스 브라우징의 핵심이다.
겨우 height 가 핵심이냐고? 모르는 소리다.
clientHeight, scrollheight,innerHeight, 등등 모두 크로스브라우징은 안된다. 하지만 그냥 height 는 된다;;
해보면 알게 될것임!
2. Iframe src 를 설정시 url 에 data를 포함하여 Inner page 에 전달하는 방식 (link)
Cross-domain Iframe 크기 변경
다음의 단계로 진행된다.
즉, Page B의 사이즈가 B->C->A 의 순서로 전달된다.
- iframe를 감싸고 있는 원래의 페이지를 생성함 ( Page A @ domain A)
- 포함되는 iframe ( Page B @ domain B ) 내부가 또하나의 iframe ( Page C @ domain A) 를 가지도록 함
- Page B 는 Page C 에게 자신의 size 정보를 url parameter형태로 전달함. 이렇게 하지 않으면 B->C 간 정보전달 할 수 없다.
- Page C 는 Page A 에게 Page B의 size 정보를 다시 넘긴다. Page C 와 Page A 는 같은 domain A 이므로 script 실행에 제약이 없다.
- Page A는 Page C 로 부터 얻은 Page B 의 size정보를 가지고 자신의 iframe element 의 크기를 변경한다.
대략의 소스는 다음과 같다. 이글루스의 절망적인 소스 첨부 기능은 이제 포기했다. 이쁘게 보이려는 잡스런 시도도 이젠 포기. 죄송하지만 알아서 들 보세요.
Page A:
<html>
<head>
<script type="text/javascript">
//요 함수는 최종적으로 page C 가 호출하는 함수이다.
function updateIFrame( height ) {
var iframe = document.getElementById( 'iframe1' );
iframe.setAttribute( 'height', height );
}
</script>
</head>
<body>
<iframe id="iframe1" frameborder="1" style="margin-left: 10px;" marginheight="0"
marginwidth="0" scrolling="no" topmargin="0" width="100%" >
</iframe>
<script type="text/javascript">
//iframe 의 주소에 자신의 domain 정보를 붙여서 넘긴다.
var iframeSrc="http://domainB/pageB.htm#"+document.domain;
var iframe = document.getElementById( 'iframe1' );
iframe.src = iframeSrc;
</script>
</body>
</html>
Page B:
<html>
<head>
<script type="text/javascript">
//이름이 좀 거시기 한데, 원래 용도는 Page C에게 Page B의 size 정보를 건네기 위함이다.
function resizeIframe(){
var iframe = document.getElementById( 'inneriframe' );
var wrapper = document.getElementById( 'wrapper' );
var height = Math.max( document.body.offsetHeight, document.body.scrollHeight );
//정확한 domain 정보를 위해 PageA의 domain 정보를 받아서 PageC의 domain 정보로 활용한다.
var iframeDomain = document.location.href.split( "#")[1];
var iframeUrl = 'http://'+iframeDomain +'/pageC.html?height='+height
iframe.src = iframeUrl;
}
</script>
</head>
<body>
<div id="wrapper">
long content....
<iframe id="inneriframe" width="10" height="10"></iframe>
<script type="text/javascript">
resizeIframe();
</script>
</div>
</body>
</html>
Page C:
<html>
<head>
<title>Resizing Page</title>
<script type="text/javascript">
function onLoad() {
var params = window.location.search.substring( 1 ).split( '&' );
var height;
for( var i = 0, l = params.length; i < l; ++i ) {
var parts = params[i].split( '=' );
switch( parts[0] ) {
case 'height':
height = parseInt( parts[1] );
break;
}
}
if( typeof( height ) == 'number' ) {
//Page A 의 updateIframe function을 실행한다.
window.top.updateIFrame( height );
}
}
window.onload = onLoad;
</script>
</head>
<body>
<p>Resizing IFrame...</p>
</body>
</html>
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
137 | 라이노 (Rhino) 관련 링크 모음 | 황제낙엽 | 2008.07.21 | 74 |
136 | |= 비트 OR 대입 연산자 (복합대입연산자) | 황제낙엽 | 2017.03.15 | 73 |
135 | JScript Memory Leaks | 황제낙엽 | 2011.11.28 | 69 |
134 | HTTP Content-Type 정리 | 황제낙엽 | 2013.09.30 | 68 |
133 | 자바스크립트 숫자형 체크 함수 (isFinite() 함수 와 isNaN() 함수) | 황제낙엽 | 2011.12.13 | 67 |
132 | innerHTML | 황제낙엽 | 2005.12.19 | 67 |
131 | 아이디 생성 조건 검사 자바스크립트 모듈 | 황제낙엽 | 2004.11.18 | 67 |
130 | SpiderMonkey와 Tamarin | 황제낙엽 | 2008.07.14 | 66 |
129 | 상속과 Super 로의 접근 | 황제낙엽 | 2012.09.18 | 64 |
128 | 콜백지옥과 비동기제어 | 황제낙엽 | 2021.02.18 | 63 |
127 | XMLHttpRequest.setRequestHeader | 황제낙엽 | 2013.09.30 | 62 |
126 | 소숫점을 포함한 반올림 | 황제낙엽 | 2008.12.11 | 62 |
125 | Understanding delete | 황제낙엽 | 2011.11.28 | 61 |
124 | Iframe 내의 페이지 접근방법 | 황제낙엽 | 2009.11.12 | 59 |
123 | XMLHttpRequest 제대로 활용하기 | 황제낙엽 | 2017.08.01 | 58 |
122 | Javascript 내장객체 Array (배열) | 황제낙엽 | 2008.10.13 | 57 |
121 | charcode 32와 160 차이 (javascript char 160 to 32) | 황제낙엽 | 2019.05.11 | 55 |
120 | 체인 생성자(생성자 체인), 프로토타입 체인 그리고 생성자 재지정 | 황제낙엽 | 2009.08.12 | 55 |
119 | 다양한 WYSIWYG 에디터 | 황제낙엽 | 2011.11.13 | 54 |
118 | State of ECMAScript 4 ('07 12) | 황제낙엽 | 2008.07.14 | 54 |