[javascript] iframe resize jquery 아이 프레임 리사이징 소스

[javascript] iframe resize jquery 아이 프레임 리사이징 소스

 

 

 

안녕하세요.

요즘 반응형이 이슈가 됨에 따라 가변형식으로 웹을 구현하곤 합니다.

 

하지만, 아이프레임을 리사이징 하는것에 대해서는 조금 난감할 때가 있지요.

딱 원하는 소스는 아니지만,, 그래도 그나마 효율적이라고 생각되어 글을 올리게 되었습니다, 저도 힘겹게 찾은 데이터라..

 

일반 리사이징하면 가로*세로 비율이 유지되면서 리사이징이되는것을 생각하지만,,

이 소스는 아무래도 기준점이 가로폭이 되는듯 합니다. 제가 적용해본바로는 말이죠..

 

그래도 저처럼, 똑같은 고민때문에 고생하시는 분을 위해

소스를 남깁니다.

 

하단에 스크립트 넣어주시고,

 

<script type="text/javascript">
function resize_frame(id) {
var frm = document.getElementById("embeded-content");
function resize() {
frm.style.height = "auto"; // set default height for Opera
contentHeight = frm.contentWindow.document.documentElement.scrollHeight;
frm.style.height = contentHeight + 300 + "px"; // 23px for IE7
}
if (frm.addEventListener) {
frm.addEventListener('load', resize, false);
} else {
frm.attachEvent('onload', resize);
}
}
resize_frame('embeded-content');
</script>

 

해당 아이프레임에 아이디값 embeded-content을 줍니다. 높이를 제시해야.. 아이프레임 영역이 생성되더라구요.. 참고하세요.

 

<iframe id="embeded-content" width="90%" height="800" frameborder="0" marginwidth="0" scrolling="no" src="경로주소"></iframe>