HTML DIV 안의 iframe 높이 height 를 구해보자. 다음에디터 높이를 동적으로 변경!

다음 에디터를 사용 하는데, 작성한 글의 높이에 맞춰서 에디터의 높이도 변경하고 싶었다. 에디터를 로드 하는 부분에서 높이를 지정할 수 있는데, 이 높이 값보다 본문 높이 값이 크면 스크롤바가 생겨서 마음에 영 들지 않는다.

PHP로 계산해서 높이값을 던져 주고 싶었지만, PHP단에서 높이를 측정할 방법을 못 찾았다.

<div id="tx_canvas_wysiwyg_holder" ...>
<iframe id="tx_canvas_wysiwyg" ...></iframe>
</div>

크롬엔 개발자 툴이 있다. F12를 누르면 현재 페이지의 구석 구석을 해집어 볼 수 있다.
tx_canvas_wysiwyg이란 iframe 안에 본문 내용이 몽땅 들어 간다.

Editor.getCanvas().setCanvasSize({ height: '700px' });

위와 같이 높이를 설정해 줄 수 있다. 에디터 안의 본문 높이가 설정 값보다 클 경우 스크롤바가 생겨 버린다. 본문을 모두 불러온 다음 에디터 높이를 변경하려면 스크립트로 처리 하는게 좋을 것 같다.

alert( $("#tx_canvas_wysiwyg').height() );

스크롤바가 생겨 있는데도 본문을 담고 있는 iframe의 높이값을 찍어보면 '700'을 돌려준다.
그럼 어떻게 해야 스크롤바 길이 까지 포함해서 가져올 수 있을까.
iframe이 담고 있는 html body 본문의 height 값을 가져오면 된다.

alert( document.getElementById("tx_canvas_wysiwyg").
          contentWindow.document.body.offsetHeight );

뭔가 길어졌지만, 이렇게 하면 iframe안의 본문 높이를 확인 할 수 있다.
이제 아래와 같이 에디터의 높이 height 값을 변경 해주면 된다.

var editor_height = document.getElementById("tx_canvas_wysiwyg").
                                   contentWindow.document.body.offsetHeight;
$("#tx_canvas_wysiwyg").height( editor_height );

IE8에서는 offsetHeight대신 scrollHeight로 바꾸자. 두개 차이는 뭔지 모르겠다.
그 이상 버전에서는 확인하지 못했다.