크롬과 익스플로러에서 다 잘되는 iframe 높이자동조절 방법

iframe 높이자동조절은 쇼핑몰이나 블로그등 각종 웹사이트를 디자인할때 종종 사용하게 됩니다.
방법도 다양하고 소스도 인터넷에서 쉽게 구할 수 있습니다.

하지만 간혹 문제가 발생하곤 합니다.
무엇이냐하면... 윈도우 운영체제에 기본적으로 설치되어있는 '익스플로러'에서는 iframe 높이자동조절이 잘되지만 '크롬'이나 '파이어폭스'등에서는 높이가 자동으로 조절되지 않았습니다.

이게 왜 문제가 되느냐하면 요즘처럼 스마트폰이나 태블릿이 널리 보급되어 사용되고 있는 마당에 '안드로이드' 나 'ios' 운영체제에서는 크롬이나 파이어폭스같은 운영체제들이 사용되고 있기 때문에 사용자들에게 완벽한 웹페이지를 보여줄 수 없다는 것이죠.

윈도우 상에서 개발이나 디자인 하시는 분들은 스마트모바일 상에서 잘되는가를 테스트 하려면 크롬이나 파이어폭스를 설치하고 테스트해야 한다는 말입니다.

지금부터 설명드리는 방법은 익스플로러와 크롬 모두에서 iframe 높이자동조절이 잘 되는, 현재 제가 사용하고 있는방법입니다.

어렵지 않으니 잘 보시고 적용해보세요.


1. 불러드릴.html 소스 (자식)

<div id="content">

......내용.......

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

2. 부르는.html 소스 (부모)

<link rel="stylesheet" type="text/css" href="css 파일의 주소(위치)">

<iframe id="contentFrame" name="contentFrame" src="불러드릴.html 주소(위치)" marginwidth="0" marginheight="0" frameborder="0" width="100%" scrolling="no" ></iframe>

3. css파일 내용

@charset "utf-8";
/* CSS Document */
#contentFrame{
height:원하는 높이;
};

자, 설명드리겠습니다.
html 태그작성법에 대한 기초, 기본적인 설명은 패스하고 원리에 대한 설명을 드릴께요.
일단 위에 작성한것처럼 불러드릴.html , 부르는.html , css파일 이렇게 3가지가 필요합니다.

약간 특이한게 css 파일까지 만들었다는 것이죠.
인터넷에서 iframe 높이자동조절에 관한 소스들을 보면 불러드릴 파일과 부르는 파일만 있으면 되는데 말이죠.
왜 css파일까지 만들었는지 설명드리겠습니다.

css 파일이 없는 상태에서 불러드릴.html 소스와 부르는.html 소스만 있더도 익스플로러에서는 잘 표현됩니다만 크롬에서는 자동높이조절이 않됩니다.
때문에 css 파일을 만들어서 고정적으로 높이가 조절되게 구성을 한것입니다.

그럼 여기서 한가지 의문이 생길 수 있겠죠.
그냥 바로 부르는.html 소스에 높이를 적용하면 (height=OO) 되지 않는가?

틀린말은 아닙니다만 저렇게 구성한 이유가 있습니다.
보통 iframe 높이자동조절은 쇼핑몰 상세페이지를 디자인할때 많이 사용하죠.
특히 지마켓 상품페이지를 이런식으로 꾸미는데요.

상세페이지 내용을보면,

이런 구성으로 이루어지죠.

여기서 메인이미지와 상품나열부분은 모든 상품페이지에 공통적으로 들어가는 부분이고 계속해서 상품이 늘어날때 마다 달라지는 높이값을 수많은 상품페이지를 열어 수정을 해야하기 때문에 메인부분을 하나의 페이지로 만들어서 각각의 상품페이지에서 콜(call) 하는 식으로 구성하게 됩니다.

때문에 이 부분을 iframe 을 써서 높이가 자동으로 조절되게 해야하는것이죠.

css 파일에 이 메인부분에 대한 높이를 강제로 설정해줌으로써 스마트모바일 버전, 크롬웹브라우저에서도 정확히 표현될 수 있는것입니다.

제가 테스트해본 내용을 표로 정리해보겠습니다.
css 파일이 없을 경우

위에 표는 먼저 말씀드린 소스들이 저렇다는 거구요.
표처럼 로컬이나 웹호스팅에 파일이 있을때 익스플로러, 크롬 모두 iframe 자동높이조절이 잘되는 소스도 쉽게 구할 수 있으니 로컬이나 웹호스팅단계까지만 페이지를 구성한다하시면 필요에 따라 다른 iframe 자동높이조절 소스 구하시면 됩니다.
하지만 걔들도 지마켓으로 들어가만 역시나 안되더라구요..ㅡㅡ;;

지마켓 상세페이지를 꾸미려면 어쩔수없이 css파일을 써야 했습니다.

상품의 갯수가 늘어날때 마다 상품페이지는 점점늘어날 것이고 이때마다 일일이 상품페이지를 열어서 iframe 높이값을 변경해줘야 하기 때문에 생각만하도 끔찍한 상황이 되겠죠.
이럴땐 저렇게 css파일로 속성값(여기서는 높이값(height)이겠죠.) 을 한번만 정해주면 다른 수많은 페이지에 적용이 되도록하는 방법이 가장 효율적일것 같습니다.

여기서 주의하실 점 몇가지 알려드리죠.

1. css파일은 지마켓 이미지호스팅에 업로드가 않됨. (css파일은 다른 웹하드에 업로드)
  ※ html파일은 지마켓 이미지호스팅에 업로드 됨.

2. css파일 소스에서 엔터치치말것. (크롬에서 한줄을 띄우면 인식하지 않음.)

@charset "utf-8"; /* CSS Document */ #contentFrame{ height:원하는 높이; };	@charset "utf-8"; /* CSS Document */ #contentFrame{ height:원하는 높이; };
O	X

스마트모바일 환경이 대중화된 이상 웹페이지를 제작할때 항상 크롬이나 파이어폭스로 테스트하는 습관을 들여야겠네요...일이 많아집니다.........이휴...

말이 길어져서 복잡하게 보이시겠지만 간단한 방법이니 윈도우에서는 iframe 높이자동조절이 잘되지만 스마트환경에서 iframe 자동높이조절이 않되서 고민하시는 분들은 이 방법을 한번 사용해보세요.
특히 지마켓에 입점하신 판매자분들께 권해드리고 싶네요..

이해않가시는 분들은 댓글 주세요..
저도 글로다 설명드릴려니 한계가 있군요.^^;;