iFrame 컨텐츠에 맞게 Resizing

프로그래밍/JavaScript

iFrame 컨텐츠에 맞게 Resizing

도깨비방망이 2012. 10. 25. 16:42

1. 타 도메인 컨텐츠를 iFrame에 넣는 경우 Resizing

- Javascript는 보안상 이유로 타 도메인의 객체에는 접근 못하게 되어 있음. 따라서 직접적인 Height조절은 안되고 메인 사이트에 특정 Resizing Html을 별도 생성

1) 방법

- 총 3개의 문서가 필요

[ A 사이트 ]

a-1 문서 : iframe 을 가진 메인 문서 ( 표출되는 문서 )

a-2 문서 : B사이트 b 문서에서 b 문서 Height 를 알려주는 A 사이트 문서

Height를 parameter로 B 사이트 b문서에서 받고 a-1의 iframe의 Height를 설정

[ B 사이트 ]

b 문서 : A 사이트 a 문서의 iframe 에 들어가는 B 사이트 문서

2) 구현

- JQuery 사용

[ a-1 문서 ]

[ b 문서 ]

[ a-2 문서 ]

<head> <title>a-2문서</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script src="../00_include/jvs/jquery-1.6.4.min.js" type="text/javascript"></script> <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 ;) //parent.parent.document.getElementById('ifrmResizing').style.height = height; parent.parent.$("#ifrmResizing").height(height+"px"); parent.parent.$(".page").height((height + 60)+"px"); } } window.onload = onLoad; </script> </head> .

저작자표시 비영리 변경금지