<iframe/> 실시간 리사이징

iframe 을 사용하는 경우 해결해야할 대표적인 문제중 하나는 스크롤바를 없애는 것이다.
"overflow : hidden" 으로 스크롤바를 무조건 가리는 경우 스크롤바는 사라지지만 내용물로 인해
여전히 스크롤바 없이 스크롤은 되는 상태이다.

스크립트를 활용해야 한다.

// [jQuery]
$iframe.on("load",function(){
	var iDoc = $iframe.get(0).contentDocument 
    // or $iframe.get(0).contentWindow.document 

    $iframe.height(iDoc.body.scrollHeight);
    $iframe.width(iDoc.body.scrollWidth);
    $iframe.css("border","none");
});

이것으로 해결되었다고 생각했지만
화면 사용 중 iframe 내부 컨텐츠의 변화에 따라 사이즈가 변경이 되어 스크롤이 생기는 경우가 있었다.
검색을 통해 확인해본 결과 setInterval 의 타이머로 실시간 체크를 하는 방법이 많이 나왔다.

나는 그보다는 'resize' 이벤트를 통해서 스크롤을 없애보기로 했다.
iframe 내부 컨텐츠의 resize 이벤트를 잡아서 iframe 의 사이즈를 조절하기로 했다.

대략 이런 식으로 가능한 것 같다.

// [jQuery]
$($("iframe").get(0).contentDocument).on('resize',function(){
	$("iframe").height($("iframe").get(0).contentDocument.body.scrollHeight);
});

// jQuery 를 사용하지 않는 경우 .onrize = function(){} 으로 작성할 수 있다. 

주의할 점으로
iframe 이 로드되기 이전에 이벤트 핸들러가 읽히면 타겟팅할 내부요소가 존재하지 않는 시점이기 때문에 로드된 이후의 시점에 핸들러가 실행되도록 하는 것이 바람직하겠다.