웹마스터 팁
다른 도메인간 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일이상 지난 글에 댓글달면 포인트 지급 안하기 [19] | SMaker | 2011.02.21 |
요약 책갈피 경량판 애드온(misol 님) - 회색으로 작업한 이미지입니다. 필요한분 사용하세요
[1]
 | 빨간발 | 2011.02.16 |
| nginx에서 proxy 설정하기 [2] | fsfsdas | 2011.02.20 |
| [시니시즘] 파일첨부 버튼 2개 만들기 팁 [1] | 시니시즘 | 2012.01.27 |
| 확장변수 중 전화번호 양식으로 write_form.html 에서 script로 제어시 | sejin7940 | 2012.02.16 |
| XE에서 메일기능이 작동하지 않을때 | 애호가 | 2012.02.16 |
| 일반 페이지에 로그인(세션) 정보 활용하기 [13] | noirzo | 2008.11.07 |
|
v1.5 관리자 페이지에서 v1.4처럼 모듈 목록 펼쳐놓기
[14]
| 우진홈 | 2012.01.21 |
| 업데이트 후 사이트 통함검색이 안되시는 분 보십시오^^ | RGM | 2012.02.12 |
| SEO:타이틀중 게시글제목과 게시판제목의 위치를 바꾸기 [4] | 해커다 | 2012.01.05 |
| 다른 도메인간 iframe 크기 자동조절(cross domain iframe auto resize) [2] | 서기 | 2008.04.24 |
|
스마트폰에서 xe 구축
[3]
| 최태진814 | 2012.02.06 |
| make install 로 설치한 파일 제거 방법 [2] | StyleRoot | 2012.02.08 |
| [XE1.4.5.10]게시판 파일첨부 버튼이 먹통일 때.. | 카리브 | 2012.02.08 |
| 특정 도메인의 메일 주소로만 가입 인증 메일 보내기 [3] | 박정욱 | 2009.03.28 |
| 가가라이브 위젯이 메뉴를 가릴때 수정방법 [2] | 웹엔진 | 2012.01.26 |
| XE 포인트 파일캐쉬대신 memcache 사용하기 [4] | 최기훈. | 2012.02.06 |
|
관리자모드에서 메뉴 항상 펼치기
[1]
| 아드레날린 | 2009.06.09 |
|
묻고 답하기 게시물 옮기는 法
[2]
| CMD | 2012.02.05 |
|
SSH 지원안하는 웹호스팅에서 빠르게 XE설치하기.
[5]
| DynamicLaser | 2011.05.22 |