메뉴 보이기
Profile
이온디

2016.01.06

iframe

iframe 높이 재설정(크롬 지원, IE 미지원)

조회 수 384 추천 수 0
Code /* iframe 높이 재설정
* iframe 태그보다 먼저 선언되어야 실행됨. 그래서 head 안에 js 파일을 삽입함.
* */
function autoResize(id){
var newheight;
// var newwidth;

if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
//newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
//newwidth=document.getElementById(id).contentWindow.document.html.offsetWidth;
}

document.getElementById(id).height=(newheight) + "px";
// document.getElementById(id).width=(newwidth) + "px";

아이프레임 자동 높이 #1

- IE에서 오류남, 크롬 작동

html

<iframe width="100%" height="100%" src="./adm_stu001_resume3_list.html" scrolling="no" id="iframe3" onload="autoResize('iframe3')" frameborder="0" class="ifr"></iframe>

js
/* iframe 높이 재설정
 * iframe 태그보다 먼저 선언되어야 실행됨. 그래서 head 안에 js 파일을 삽입함.
 * */
function autoResize(id){
    var newheight;
//                                                var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
        //newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
        //newwidth=document.getElementById(id).contentWindow.document.html.offsetWidth;
    }

    document.getElementById(id).height=(newheight) + "px";
    //                                              document.getElementById(id).width=(newwidth) + "px";
}

아이프레임 자동 높이 #2

- IE11(X)
- 출처 : http://rocabilly.tistory.com/110

$(function () {
    $('.ifr').load(function () {
        var iframeContentWindow = this.contentWindow;
        var height = iframeContentWindow.$(document).height();
        this.style.height = height + 'px';
    });
});

 

아이프레임 자동 높이 #3

- IE11 (O), Chrome(O)
- 출처 : http://rocabilly.tistory.com/110
- 사용방법 : iframe의 id값을 적어줘야 한다.

js

function resizeTopIframe(dynheight) {
    document.getElementById("iframe").height = parseInt(dynheight) + 10;
}


/////////////////////////////////////////////////////////////////////////////////////  
// 자식 페이지  
// 등록 후 리프레시 되면 자식 페이지 크기를 부모페이지에 넣어준다  
/////////////////////////////////////////////////////////////////////////////////////  

function callResize()
{
var height = document.body.scrollHeight;
parent.resizeTopIframe(height);
}
window.onload =callResize;

 

아이프레임 자동높이 #4 [추천]

지원 : IE, 크롬 모두 지원됨.
출처 : http://heavening.tistory.com/archive/20130402
사용방법 : 제이쿼리를 사용

$(function() {
    $('iframe').load(function() {
        $(this).css("height", $(this).contents().find("body").height() + "px");
    });
});

 

Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

Profile
에디터
번호 제목 글쓴이 날짜 조회 수
공지 [팁] 자바스크립트 관련 유용한 링크 모음집 (러닝은빛) profile 이온디 2015.08.27 402
공지 자바스크립트 추천 사이트 1 profile 이온디 2015.08.06 318
54 [고급팁] Asynch JS: The Power Of $.Deferred profile 이온디 2016.06.10 33
53 [고급팁] 비동기 프로그래밍을 위한 Promise와 Deferred 알아보기 (고재도) profile 이온디 2016.06.10 74
52 [차트] 대시보드를 위한 오픈소스(Open Source) 차트(Chart) 라이브러리 profile 이온디 2016.06.02 3563
51 [차트] 접근성을 고려한 차트 라이브러리, Nwagon profile 이온디 2016.06.02 250
50 [라이브러리] 모바일 터치 제스츄어 profile 이온디 2016.02.22 40
49 [기초] 자바스크립트 페이지이동 profile 이온디 2015.08.31 378
48 [iframe] 금융투자협회 아이프레임 적용 소스 profile 이온디 2016.01.16 0
[iframe] iframe 높이 재설정(크롬 지원, IE 미지원) profile 이온디 2016.01.06 384
46 [차트] echarts profile 이온디 2015.12.21 355
45 [차트] amcharts profile 이온디 2015.12.18 222
44 [팁] 웹사이트 콘텐츠 복사 제한하기 profile 이온디 2015.09.15 81
43 [팁] 끊김없이 흐르는 배너(2009. 10. 12) profile 이온디 2015.09.13 204
42 [팁] 자바스크립트 성능 향상 팁 profile 이온디 2015.09.04 54
41 [form] [javascript] input reset / 자바스크립트 인풋 초기화(리셋)하는 방법 및 포커스 지정하기(ID 기준) profile 이온디 2015.08.31 7164
40 [form] [Javascript] 인풋값 체크 후 포커스 지정(name 기준) profile 이온디 2015.08.31 60
39 [라이브러리] 데이터를 처리할 때 유용한 6가지 자바스크립트 라이브러리(Sharon Machlis | Computerworld, 2013) profile 이온디 2015.08.28 74
38 [고급팁] ‘제다이급’ 자바스크립트 고수들이 전하는 6가지 개발팁 (Jonathan Freeman | InfoWorld, 2013) profile 이온디 2015.08.28 85
37 [문제] onMouseout과 setTimeout 사용법 profile 이온디 2015.08.28 90
36 [고급팁] 자바스크립트 this profile 이온디 2015.08.26 209