여태까지 iframe 높이를 자동으로 적용되는 소스를 많이 봐왔지만 거의 실패했습니다.
특히 제로보드 같은 게시판을 불러오면 아무래도 jQuery 나 Javascript 에서 충돌이 일어나 적용이 잘 안됐는데 이번에 완전 제대로 된것을 찾았습니다.
<body>에 <iframe> 넣을 곳에 아래와 같은 소스를 넣어주면 됩니다.
참고로 주의하실 점은 iframe 태그 밑에 스크립트 소스를 넣어주셔야 작동됩니다.
<iframe id="board" width="100%" scrolling="no" src="페이지주소" frameborder="0"></iframe>
<script>
function resize_frame(id) {
var frm = document.getElementById("board");
function resize() {
var ms_ie = false;
var ua = window.navigator.userAgent;
var old_ie = ua.indexOf('MSIE ');
var new_ie = ua.indexOf('Trident/');
if ((old_ie > -1) || (new_ie > -1)) {
ms_ie = true;
}
if ( ms_ie ) {
//IE specific code goes here
var iframeHeight=frm.contentWindow.document.body.scrollHeight;
frm.height=iframeHeight+20;
}else{
frm.style.height = "auto"; // set default height for Opera
contentHeight = frm.contentWindow.document.documentElement.scrollHeight;
frm.style.height = contentHeight + 23 + "px"; // 23px for IE7
}
}
if (frm.addEventListener) {
frm.addEventListener('load', resize, false);
} else {
frm.attachEvent('onload', resize);
}
}
resize_frame('board');
</script>
일단 위의 소스를 붙여넣으셔서 테스트를 해보세요.
여기까지 진행하셔서 잘 되셨다면 문제가 없습니다.
아래 소스는 건드릴 필요가 없습니다.
만약!!!!!!!!!!!!!!
제로보드4의 DQ갤러리를 사용하다 보면 사진을 업로드 하는 플래시 때문에 아래로 더 이상 안내려 간다면 아래의 소스를 <head>에 추가해서 삽입하세요.
<script type="text/javascript">
window.onload = function() {
var lastHeight = 0;
var curHeight = 0;
var targetFrame = document.getElementById('board'); // iframe id 입력
targetFrame.onload = function(){
curHeight = targetFrame.contentWindow.document.body.scrollHeight + 'px';
targetFrame.style.height = curHeight;
}
setInterval(function(){
curHeight = targetFrame.contentWindow.document.body.scrollHeight + 'px';
if ( curHeight != lastHeight ) {
targetFrame.style.height = curHeight;
lastHeight = curHeight;
}
},500);
}
</script>
'JAVASCRIPT' 카테고리의 다른 글
| 함수 호출 시 ajax로 리턴값 받기 (0) | 2016.01.29 |
|---|---|
| 이미지 사이즈(width:100%)가 달라져도 이미지맵 좌표를 유지하는 스크립트 (0) | 2015.11.11 |
| 마우스 클릭 위치 좌표값 (0) | 2015.08.21 |
| Datepicker 설정 (0) | 2015.07.23 |
| 즐겨찾기 추가 스크립트 (0) | 2015.07.18 |
