iframe(cross domain)에서 동적으로 높이 얻기, CORS 에러 해결책

2023. 8. 19. 00:48Web Frontend

그것은 바로 iframeResizer.js를 사용하는 것이다.

iframe 쪽과 현재 사용하는 쪽 모두 관련 코드를 삽입함으로써, iframe의 높이를 동적으로 받아올 수 있다. 

 

iframe 내에 관련 코드를 삽입.

부모 사이트에는 iframeResizer.js 삽입 후 iFrameResize({}, '#myIframe') 호출하면 끝...

 

예상컨대, massge 메서드를 통해서 관련 정보를 전달하고 전달 받는 구조로 보인다.

이렇게하면, 따로 서버에서 설정하지 않아도 간편하게 url 다른 iframe의 높이 값을 자동으로 셋팅 된다.

 

iframe {
    width: 1px;
    min-width: 100%;
    display: block;
}

<iframe id="myIframe" src="상대도메인" frameborder="0"></iframe>
<script src="source/iframeResizer.js"></script>
<script>
iFrameResize({}, '#myIframe')
</script>