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