[javascript]아이프레임 동적 높이 변경

일반적으로 아이프레임 이 페이지에 들어갈때

$(document).ready(){
    $(function() {
 $('iframe').load(function() {
      $(this).css("height", ($(this).contents().find("body").height() + 30) + "px");
    });

}

위 와 같은 방식으로 아이프레임이 로딩될때 이벤트를 얻어서 현재 문서의
높이를 변경하는 방식을 사용할것이다.

하지만 아이프레임 페이지의 높이가 동적으로 변한다면 위 코드는 처음 페이지 로딩 할때만 높이를 마추므로 쓸모가 없어진다.

현재의 페이지와 아이프레임의 도메인이 다른경우는 어쩔수 없이 기본 아이프레임 에 높이를 고정으로 설정한후 오버플로우 스크롤로 할수 밖에 없다. 역시 위 코드는 쓸수 없다.

하지만 같은 도메인내에서 아이프레임 페이지가 존재한다면. 스크롤을 사용하지 않고
동적 높이 변환이 가능하다.

예) a.html 에서 b.html 을 아이프레임으로 넣을때

a. html 에 아래와 같은 함수를 선언한다.

//아이프레임에서 사이즈 변경시 호출 되는 함수
function resizeIFrame(szHeight){
$("iframe").css("height", szHeight+ "px");
}


b.html 에 아래와 같은 함수를 선언한다.

//창의 높이가 바뀔경우 부모창에 프레임사이즈 변경 함수 호출

function sendFrameSize(){

        if (typeof window.parent.resizeIFrame == "function") {
window.parent.resizeIFrame($("body").prop("scrollHeight"));
}
}

function sendFrameInitSize(size){
if (typeof window.parent.resizeIFrame == "function") {
       window.parent.resizeIFrame(size);
}
}

실행계획

b.html 에서는 a버튼을 클릭시 ajax 로 데이터를 받아와 화면에 렌더링하여 동적으로 문서의스크롤높이 값이 변한다. b버튼 클릭시 a 버튼 클릭으로 받아온데이터 를 화면에서 삭제하고 b버튼 클릭으로 인한 데이터를 다시 렌더링한다.

문제점

a.html 에서 프레임내에 a버튼을 클릭했을때 데이터를 받아온후 sendFrameSize() 호출 하여
부모창의 높이를 증가시켰을때 정상적으로 작동이 되었으나, 다른 b버튼을 클릭하여 받아오는 데이터가 바뀌고 b.html 의 스크롤높이 사이즈가 줄었을때는 부모창 함수의 변경된 높이가 전달이 되지 않고 현재의 높이값만 전달이 되어 사이즈가 줄지 않음.

해결방법
버튼클릭에 따라 받아오는 데이터가 달라져 높이 가 바뀔경우 먼저 b.html 에서
sendFrameInitSize(size) 고정값 사이즈를 파라미터로 넘긴후
데이터 렌더링 후 sendFrameSize() 를호출하여 부모창의 높이를 변경한다.

한마디로  데이터 받아온후  sendFrameSize() 만호출 하면 높이가 늘어나긴 하지만 줄진 않음.(크롬 브라우저)

위처럼 하니까 크롬 익스에서 정상작동 하였다.