G5 게시판에 iframe 적용시 세로 맞춤

G5 게시판에 iframe 적용시 세로 맞춤

QA

G5 게시판에 iframe 적용시 세로 맞춤

답변 3

본문

반응형으로 제작한 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>

 

당연히 본인이 자식창이 아닐 경우는 원래 내용대로 보여지게 됩니다.

<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);
 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 171
© SIRSOFT
현재 페이지 제일 처음으로