G5 게시판에 iframe 적용시 세로 맞춤
본문
반응형으로 제작한 G5 게시판 내용에 외부페이지를 아이프레임으로 넣어야 하는 상황입니다.
가로폭은 100%로 하면 되는데, 세로길이를 어떻게 줘야 할지 모르겠네요.
세로를 auto나 100%로 주면 내용이 보이지 않고, 사이즈를 입력하면 내용이 잘리거나
너무 세로를 크게주면 공백이 많이 생기는 문제가 있네요.
G5게시판 내에서 내용에 맞게 세로가 조정되게 할 수는 없을까요?
답변 3
이런건 부모창에서 자식창을 제어하는 것보다는 자식창에서 부모창을 제어하는 것이 더 편합니다.
부모창에 아래와 같은 아이프레임을 주고
<iframe id="myFrame" src="자식창경로" style="width:100%;display:block;border:none"></iframe>
자식창 전체에 div 를 하나 감고 거기서 parent 로 부모창을 제어해 보세요.
location.href != parent.location.href
이 조건은 현재페이지와 부모페이지의 경로가 다를 때 즉 아이프레임으로 불러졌을 때를 표현하는 것입니다.
<div id="myDiv">
자식창 내용
</div>
<script>
if (location.href != parent.location.href) parent.myFrame.style.aspectRatio = myDiv.offsetWidth / myDiv.offsetHeight;
</script>
당연히 본인이 자식창이 아닐 경우는 원래 내용대로 보여지게 됩니다.
높이를 100vh 로 해보시겠어요?
<iframe id="iframe" src="" frameborder="0" scrolling="no"></iframe>
function resizeIframe() {
const iframe = document.getElementById('iframe');
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
window.addEventListener('load', resizeIframe);
window.addEventListener('resize', resizeIframe);