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

홈페이지 제작팁

자바스크립트

글쓰기

가

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

이온디

2016.01.06 17:15

1078

https://eond.com/366336

object(HotopayModel)#862 (23) { ["error"]=> int(0) ["message"]=> string(7) "success" ["variables"]=> array(0) { } ["httpStatusCode"]=> int(200) ["module"]=> string(7) "hotopay" ["module_info"]=> NULL ["origin_module_info"]=> NULL ["module_config"]=> NULL ["module_path"]=> string(52) "/home/eond/web/eond.com/public_html/modules/hotopay/" ["xml_info"]=> NULL ["module_srl"]=> NULL ["mid"]=> NULL ["act"]=> NULL ["template_path"]=> NULL ["template_file"]=> NULL ["layout_path"]=> NULL ["layout_file"]=> NULL ["edited_layout_file"]=> NULL ["stop_proc"]=> bool(false) ["user"]=> object(Rhymix\Framework\Helpers\SessionHelper)#861 (20) { ["member_srl"]=> int(0) ["user_id"]=> NULL ["user_name"]=> NULL ["nick_name"]=> NULL ["email_address"]=> NULL ["phone_number"]=> NULL ["homepage"]=> NULL ["blog"]=> NULL ["birthday"]=> NULL ["denied"]=> NULL ["status"]=> NULL ["is_admin"]=> string(1) "N" ["is_site_admin"]=> NULL ["profile_image"]=> NULL ["image_name"]=> NULL ["image_mark"]=> NULL ["signature"]=> NULL ["description"]=> NULL ["group_list"]=> array(0) { } ["menu_list"]=> array(0) { } } ["request"]=> object(Rhymix\Framework\Request)#10 (13) { ["method"]=> string(3) "GET" ["compat_method"]=> string(3) "GET" ["url"]=> string(32) "javascript/366336/comment/464616" ["hostname"]=> string(8) "eond.com" ["domain"]=> NULL ["protocol"]=> string(5) "https" ["callback_function"]=> string(0) "" ["_route_status":protected]=> int(200) ["_route_options":protected]=> object(stdClass)#11 (5) { ["cache_control"]=> bool(true) ["check_csrf"]=> bool(true) ["is_forwarded"]=> bool(false) ["is_indexable"]=> bool(true) ["enable_session"]=> bool(true) } ["module"]=> string(5) "board" ["mid"]=> string(10) "javascript" ["act"]=> string(16) "dispBoardContent" ["args"]=> array(5) { ["page"]=> int(2) ["document_srl"]=> string(6) "366336" ["comment_srl"]=> string(6) "464616" ["mid"]=> string(10) "javascript" ["act"]=> string(16) "dispBoardContent" } } ["ajaxRequestMethod"]=> array(2) { [0]=> string(6) "XMLRPC" [1]=> string(4) "JSON" } ["gzhandler_enable"]=> bool(true) }

아이프레임 자동 높이 #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값을 적어줘야 한다.

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");
    });
});

라이믹스는 이온디와 함께

댓글작성칸으로

아이프레임 자동 높이 #1

아이프레임 자동 높이 #2

아이프레임 자동 높이 #3

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

댓글 0

즐겨찾는 게시판

전체 게시판

마이페이지

로그인을 해주세요