자바스크립트 학습 게시판입니다.
글 등록하기 | 내글 관리하기 | 연재글 | 보관함
첨부파일 https://eond.com/javascript/366336

아이프레임 자동 높이 #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");
    });
});

 

코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 79 articles in 2 / 4 pages
번호 제목 제목 글쓴이 글쓴이 날짜날짜 조회 수
공지 자바스크립트 관련 유용한 링크 모음집 (러닝은빛) 파일 이온디 2015/08/27 473
공지 자바스크립트 추천 사이트 [1] 이온디 2015/08/06 355
58 [라이브러리] 자바스크립트 로딩바 nprogress 이온디 2016/06/17 125
57 [라이브러리] 자바스크립트 프로그레스바 page.js 이온디 2016/06/17 105
56 [고급팁] Javascript 바보들을 위한 Promise 강의 - 도대체 promise는 어떻게 쓰는 거야? 이온디 2016/06/10 237
55 [고급팁] 동기와 비동기 프로그래밍 이온디 2016/06/10 60
54 [고급팁] Javascript 비동기 프로그래밍 이온디 2016/06/10 122
53 [고급팁] Asynch JS: The Power Of $.Deferred 이온디 2016/06/10 42
52 [고급팁] 비동기 프로그래밍을 위한 Promise와 Deferred 알아보기 (고재도) 이온디 2016/06/10 90
51 [차트] 대시보드를 위한 오픈소스(Open Source) 차트(Chart) 라이브러리 이온디 2016/06/02 4120
50 [차트] 접근성을 고려한 차트 라이브러리, Nwagon 이온디 2016/06/02 315
49 [라이브러리] 모바일 터치 제스츄어 파일 이온디 2016/02/22 67
48 [기초] 자바스크립트 페이지이동 이온디 2015/08/31 445
47 [iframe] 비밀글 금융투자협회 아이프레임 적용 소스 이온디 2016/01/16 0
현재글 [iframe] iframe 높이 재설정(크롬 지원, IE 미지원) 이온디 2016/01/06 477
45 [차트] echarts 이온디 2015/12/21 405
44 [차트] amcharts 이온디 2015/12/18 276
43 [팁] 웹사이트 콘텐츠 복사 제한하기 이온디 2015/09/15 85
42 [팁] 끊김없이 흐르는 배너(2009. 10. 12) 파일 이온디 2015/09/13 275
41 [팁] 자바스크립트 성능 향상 팁 이온디 2015/09/04 70
40 [form] [Javascript] 인풋값 체크 후 포커스 지정(name 기준) 이온디 2015/08/31 70

해시태그 디렉터리