웹마스터 팁
다른 도메인간 iframe 크기 자동조절(cross domain iframe auto resize)
2008.04.24 13:21
참고하세요...
a.com이라는 도메인에서 b.com의 b.html을 불러올때.. 크기를 자동으로 조절하기 위한 방법입니다.
먼저 a라는 홈페이지에 auto_size.html을 만듭니다.
====================== auto_size.html - a.com =========================
<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' ) {
window.top.updateIFrame( height );
}
}
window.onload = onLoad;
</script>
</head>
<body>
<p>Resizing IFrame...</p>
</body>
</html>
=======================================================
그리고 a라는 홈페이지에서 링크할 문서에는 아래와 같이 삽입합니다.
======================= a.html - a.com ===================
<script type="text/javascript">
function updateIFrame( height ) {
var iframe = document.getElementById( 'myiframe' );
iframe.setAttribute( '+ 'height', height );
}
</script>
<iframe id="myiframe" src="http://b.com/b.html" scrolling=no frameborder=0 width="600" height="600"></iframe>
이제 b라는 도메인의 b.html에는 아래와 같이 삽입합니다.
================== b.html - b.com============================
<style>
#inneriframe { position : absolute; top : 0px; left : 0px; visibility: hidden; }
</style>
<script type="text/javascript">
function rsize() {
var iframe = document.getElementById( 'inneriframe' );
var wrapper = document.getElementById( 'wrapper' );
var height = Math.max( document.body.offsetHeight, document.body.scrollHeight );
iframe.src = 'http://a.com/auto_size.html?height='+height; }
</script>
<body onload=rsize(); >
<div id=wrapper>
내용
</div>
<iframe id="inneriframe" width="10" height="10"></iframe>
</body>
a.com이라는 도메인에서 b.com의 b.html을 불러올때.. 크기를 자동으로 조절하기 위한 방법입니다.
먼저 a라는 홈페이지에 auto_size.html을 만듭니다.
====================== auto_size.html - a.com =========================
<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' ) {
window.top.updateIFrame( height );
}
}
window.onload = onLoad;
</script>
</head>
<body>
<p>Resizing IFrame...</p>
</body>
</html>
=======================================================
그리고 a라는 홈페이지에서 링크할 문서에는 아래와 같이 삽입합니다.
======================= a.html - a.com ===================
<script type="text/javascript">
function updateIFrame( height ) {
var iframe = document.getElementById( 'myiframe' );
iframe.setAttribute( '+ 'height', height );
}
</script>
<iframe id="myiframe" src="http://b.com/b.html" scrolling=no frameborder=0 width="600" height="600"></iframe>
이제 b라는 도메인의 b.html에는 아래와 같이 삽입합니다.
================== b.html - b.com============================
<style>
#inneriframe { position : absolute; top : 0px; left : 0px; visibility: hidden; }
</style>
<script type="text/javascript">
function rsize() {
var iframe = document.getElementById( 'inneriframe' );
var wrapper = document.getElementById( 'wrapper' );
var height = Math.max( document.body.offsetHeight, document.body.scrollHeight );
iframe.src = 'http://a.com/auto_size.html?height='+height; }
</script>
<body onload=rsize(); >
<div id=wrapper>
내용
</div>
<iframe id="inneriframe" width="10" height="10"></iframe>
</body>
댓글 2
-
드렁크수달
2009.04.06 22:04
테스트 해본 결과 아주 잘 되네요 ^^ 감사합니다.. 퍼가도 되겠죠 ^^ -
EveR™
2012.02.10 14:02
제이 쿼리가 훨 쉬울듯 하네요. ㅋㅋ
쌩 자바스크립트는 넘 어려워요 ㅠㅠ
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 고글검색하기!! [7] | 김민환 | 2006.10.30 |
| 셀렉트 박스를 이용한 콘트롤 만들기 ( 위로 이동 ) [1] | 예뜨락 | 2006.10.30 |
| 로딩 레이어 만들기 [6] | 이진수 | 2006.11.27 |
| [동영상강좌] 홈페이지에 BGM을 달아보자 [5] | 서기 | 2007.01.10 |
| 슬라이딩 레이어 메뉴!! 메뉴가 상하로 따라다녀요!! [4] | TiZa | 2007.02.03 |
| 비밀번호 입력해야 해당 페이지 보이기 [3] | 이명우 | 2007.02.28 |
| Light box 이용하기.. [10] | 이진수 | 2007.03.12 |
| 자바스크립 동영상 플레이어 2 (네이버 발췌) [4] | 이진수 | 2007.03.28 |
| 자신의 홈피에 날씨를 달아보자. [2] | Rising.kr | 2008.01.21 |
| 자신의 홈페이지에 (검색,사전,로또,주식) 통합버전을 넣어보자. [3] | Rising.kr | 2008.01.21 |
| 프레임홈일때 부분프레임 무단링크 방지하기 [3] | gosoo99 | 2008.04.08 |
| 웹페이지에 마우스 따라다니는 예쁜 시계를 넣자 [5] | gosoo99 | 2008.04.08 |
| 다른 도메인간 iframe 크기 자동조절(cross domain iframe auto resize) [2] | 서기 | 2008.04.24 |
나만의 위지윅 웹에디터 만들기 - 글 쓰기에 앞서
[4]
 | 예뜨락 | 2008.05.05 |
|
나만의 위지윅 웹에디터 만들기 - 기본 준비2
[2]
| 예뜨락 | 2008.05.11 |
| 지정된 시간동안 강제로 보여지는 언론사에서 많이 사용하는 광고창 | ITBANK.kr | 2008.10.01 |
| 구글 번역기 API | 유비키리 | 2008.10.29 |
| 웹서핑 동작 원리의 이해 [18] | zero | 2007.10.05 |
| PHP에 대한 소개 [216] | zero | 2000.03.06 |
| Database, MySQL 이 무엇인가~~~ ^^ [103] | zero | 2000.03.06 |