티스토리 뷰

개요

홈페이지를 만들다 보면 IFrame 에 타 도메인의 어플리케이션을 넣어야 하는 경우가 생깁니다. 이런 경우 문제는 IFrame 안에 삽입된 타 도메인의 어플리케이션의 문서가 IFrame 의 높이를 넘어서면 IFrame 에 스크롤바가 생기면서 별로 보기가 좋지 않아집니다. 이 문서에서는 삽입된 어플리케이션 문서의 높이에 따라 IFrame 높이를 적절하게 조절해서 스크롤바를 없애는 방법을 설명합니다.

타 도메인의 페이지를 핸들링 할 수 없습니다.

타 도메인의 페이지를 핸들링 할 수 없습니다.

조건

A 도메인 a.htm 에 삽입된 B 도메인의 b.htm 문서를 수정할 수 있어야 합니다.

해법

해법은 B 도메인의 b.htm 에 A도메인의 다른 페이지 a-1.htm 을 iframe에 삽입하면 삽입된 a-1.htm 에서 a.htm 의자바스크립트 함수를 호출할 수 있다는겁니다.

코드는 아래와 같습니다. ( 방법만 배우시고 코드의 세세한 부분은 무시해주세요  )

A 도메인 a.htm

<iframe src="http://B도메인/b.htm" width="100%" height="400" id="bFrame" frameborder="0" scrolling="no"></iframe>
<script>
function resizeFrameHeight(height) {
document.getElementById('bFrame').style.height = height;
}
</script>

B 도메인 b.htm

<iframe src="#" width="0" height="0" name="aFrame" frameborder="0"></iframe>
<script>
window.onload = function() {
document.aFrame.location.href = 'http://A도메인/a-1.htm?height=' + document.body.scrollHeight;
}
</script>

A 도메인 a-1.htm

<script>
var parameter = location.href.split('?')[1];
var height = parameter.split('=')[1];
parent.parent.resizeFrameHeight(height);

'웹개발 > HTML&CSS' 카테고리의 다른 글

CSS3 템플릿  (0) 2015.11.19
SVG 패턴  (0) 2014.07.09
Float 클리어 하는 여러가지 방법  (0) 2013.04.23
IE 에서 'position:fixed' 를 줘보자.  (0) 2013.04.02
css3 , 트랜지션 애니메이션 예제  (0) 2012.12.13
댓글
D-DAY
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함