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

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

QA

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>

 

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

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

답변을 작성하시기 전에 로그인 해주세요.
전체 171
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT