아잌후...이걸로 또 반나절 보냄 ㅋㅋㅋ
하고싶은 것은, 예를들어 index.html 페이지에 iframe을 박아놓고, 다른 도메인에 있는 todaylist.html 을 불러서 그 안에 표시하고 싶은데..todaylist 는 서버스크립트로 돌아가는 페이지라 리스트가 늘어나거나 줄어드는 등, 사이즈가 고정되어 있지 않다.
iframe을 크기고정 하면 리스트가 길어지는 경우 잘리고, 크기고정을 하지 않으면 스크롤이 생겨서 지저분하니까..불러올 때 리스트의 길이를 구해서 iframe 사이즈를 변경하고 싶은거다.
같은 도메인이면 그냥 되는데, 도메인이 다른 경우 크로스도메인 뭐시기 해서 보안상 브라우저가 막아버린다..ㅠㅠ 브라우저 세팅을 바꿀 수는 없는 상황이고, ajax 등 비동기도 아니고..하다가 찾아보니, postMessage() 를 사용하면 된다길래 삽질하다가 성공했다.
방식은, todaylist 파일이 로드가 되면, setHeight() 를 호출해서 테이블의 높이를 가져온 후, px 문자열을 붙여서 (편의에 따라서 값만 넘겨도 ㅇㅋ) postMessage를 발신한다.
이 때, 파라메터의 "*" 에 도메인을 넣어주는게 좋음.
[todaylist.shtml] // 역시나 부분생략
<BODY>
<table class="todaylist">
// 테이블은 서버스크립트에 의해서 생성됨
</table>
<script>
(function(){
function setHeight(){
const todayList = document.getElementsByClassName('todaylist');
const tableHeight = todayList[0].clientHeight + "px";
parent.postMessage(tableHeight,"*");
}
window.onload = setHeight;
})();
</script>
</BODY>
발신된 메세지를 이벤트리스너로 받아서, 값을 iframe 높이로 설정해주면 됨.
[index.html] // 다른 부분 생략하고 iframe 과 자바스크립트 부분만 발췌
<iframe id="iframe" class="iframe" width="600px" src="//todaylist.shtml" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<script>
let frame = document.getElementById('iframe');
(function(){
window.addEventListener('message', function(event){
frame.style.height = event.data ;
},false);
})();
</script>
알면 참 쉬운데...간단하게 되는데...
이걸 가지고 반나절을 헤메이다니 역시 난 재능이 없나봐...ㅠㅠ
댓글
댓글 쓰기