콘텐츠에 맞게 iframe의 너비와 높이를 조정합니다.

콘텐츠에 간신히 맞도록 'iframe'의 '너비'와 '높이'를 '자동 조정'하는 솔루션이 필요합니다. 요점은 iframe이로드 된 후에 너비와 높이를 변경할 수 있다는 것입니다. 아이프레임에 포함된 본문의 크기 변경을 처리하기 위한 이벤트 액션이 필요한 것 같습니다.

aleksandrbel
편집된 질문1일 8월 2018 в 10:29
프로그래밍
iframe javascript html adjustment
4일 5월 2009 в 9:20
18 파운드
질문에 대한 의견 (2)
해결책
<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>
Kodos Johnson
편집된 답변29일 9월 2019 в 4:38
해설 (23)

크로스 브라우저 jQuery 플러그인.

크로스 브라우저, 크로스 도메인 라이브러리로, mutationObserver를 사용하여 콘텐츠에 맞게 iFrame 크기를 유지하고 postMessage를 사용하여 iFrame과 호스트 페이지 간에 통신합니다. jQuery를 사용하거나 사용하지 않고 작동합니다.

Community
편집된 답변26일 3월 2014 в 9:35
해설 (1)

지금까지 한 번 만 주어진 모든 솔루션이 차지하고 끄기도구 크기조정할. 이 내용이 수정된 후 iFrame 크기조정할 원하는걸까요 언급하십시오 수 있습니다. 이를 위해서는 iFrame 내부의 함수를 실행하는 데 필요한 (한 번, 내용이 변경일 불지옥의 변경된 내용을 말하는 이벤트를 합니다).

난 당분간 중지되었습니다 대체하십시오 iFrame 내부의 iFrame 내부의 DOM 국한된 것 같은 코드 (및 couldn& # 39, t 편집할지 iFrame), 코드 수행되 위부의 iFrame 중지되었습니다 DOM 함께 위부의 iFrame (및 couldn& iFrame 내부의 coming from an event # 39, t pick up).

Jquery 찾을 수 있는 솔루션 (도움을 통해 동료를) 에서 나온 어떤 리즈한테 DOM 사용할 수 있습니다. 이 경우, DOM 이 부모창.

이 같은 코드를 높여줍니까 등 필요한 경우 iFrame 내부의 실행하십시오):

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#IDofControlFiringResizeEvent").click(function () {
            var frame = $('#IDofiframeInMainWindow', window.parent.document);
            var height = jQuery("#IDofContainerInsideiFrame").height();
            frame.height(height + 15);
        });
    });
</script>
해설 (5)

한 줄 광고문 solution for sound1.mp3: 시작하는 최소 크기를 및 증대됩니다 컨텐츠뿐만 크기. 필요 없는 스크립트입니다 것이다.

<! - begin 스니핏: js 숨기십시오: &gt 거짓값 -;

끝 - &lt 스니핏 >;!

해설 (4)

이 같은 내용이 iframe 의 노력해야 할 경우 도메인 멋지구리해요. Jquery 어쨌든요 않니다 합니다.

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

할꺼이나 동적으로 조절할 수 있는 이 작업을 수행할 수 있었습니다.

<script language="javaScript">

</script>

그 다음 페이지에서 iframe 로드되는지 추가합니다.

<script language="javaScript">
function resize()
{
    window.parent.autoResize();
}

$(window).on('resize', resize);
</script>
해설 (2)

jQuery를 사용하지 않으려면 크로스 브라우저 솔루션을 사용하세요:

/**
 * Resizes the given iFrame width so it fits its content
 * @param e The iframe to resize
 */
function resizeIframeWidth(e){
    // Set width of iframe according to its content
    if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
        e.width = e.contentWindow.document.body.scrollWidth;
    else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
        e.width = e.contentDocument.body.scrollWidth + 35;
    else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
        e.width = e.contentDocument.body.offsetWidth + 35;
}
해설 (3)

나는 이 모든 코드를 사용하여 페이지의 때 로드되는지 iframe 오토장제스 높이 (오트로이트 함께 클래스). 구글 크롬, 사파리, 오페라, FF, IE 에서 테스트 및 작동하잖아.

function doIframe() {
    var $iframes = $("iframe.autoHeight"); 
    $iframes.each(function() {
        var iframe = this;
        $(iframe).load(function() {
            setHeight(iframe);
        });
    });
}

function setHeight(e) {
  e.height = e.contentWindow.document.body.scrollHeight + 35;
}

$(window).load(function() {
    doIframe();
});
해설 (5)

이 후 모든 것을 나도 날잡아 대지위에서 상행담관염이라고 작동됨 for me.

index. html

5 690 {{{000}}}

Adrian P.
편집된 답변17일 4월 2019 в 4:11
해설 (2)

이는 솔리드로 대비성 솔루션이므로

function resizer(id)
{

var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;

var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;

}

html

해설 (0)

동시에 제어할 수 있는 경우 그 내용과 부모창 IFRAME 합니다 [iFrame 레이저] (https://davidjbradshaw.github.io/iframe-resizer/).

이 자동 크기조절하기 library 는 모두 동일한 높이와 너비가, 크로스 도메인 iframe v2.03-00 맞게 컨텐트입니다. 다양한 기능을 제공하는 것이 가장 일반적인 문제를 해결하기 위해 iframe 사용하여, 다음과 같습니다.

  • IFrame 의 높이와 너비는 크기조절하기 컨텐츠뿐만 크기.
  • 여러 및 네스트된 수행됨 iframe.
  • 도메인 인증을 위한 크로스 도메인 iframe.
  • 는 페이지 크기 지원하기 위해 다양한 산출 방식이 복잡한 CSS 레이아웃.
  • 탐지합니다 변화를 일으킬 수 있는 이 페이지를 사용하여 DOM 크기조정할 무타티오노베세르베르.
  • 탐지합니다 유발할 수 있는 이벤트 페이지에서 크기조정할 (창 크기조정할 애니메이션과 전환, CSS, 방향 변경 및 마우스용 이벤트와의.
  • IFrame 및 호스트 간의 단순화됩니다 메시징으로 포스트 세이지 통한 호출.
  • Iframe 에서 iFrame 및 모피쳐 호출이네요 사이의 링크 페이지 링크 및 수정 사항을 지원합니다.
  • 에서 제공하는 맞춤형 사이징하는 및 스크롤 방법입니다.
  • 노출 크기가 모피쳐 위치 및 뷰포트가 iFrame.
  • PDF, 오도프 문서를 지원하기 위해 수행됨 비에베르제스.
  • 대체 지원부에서는 아래로 IE8.
해설 (0)

난 약간 수정된 Garnaph& 솔루션이므로 # 39 위, 괜찮네요. 수정한 크기를 기준으로 직전 자신의 해결책을 일인 것 같았다 iframe 용량마다 이벤트. 내 상황 (이메일을 통해 무슬림으로써 iframe) 난 직후 필요한 iframe 세로폭 변경하시려면 무슬림으로써. 예를 들어 보여 준 you&quot 검증 오류 또는 "; 이후 메시지를 무슬림으로써.

난 그냥 내 기질에 네스트된 클릭 () 함수를 iframe html 및 넣습니다.

<script type="text/javascript">
    jQuery(document).ready(function () {
        var frame = $('#IDofiframeInMainWindow', window.parent.document);
        var height = jQuery("#IDofContainerInsideiFrame").height();
        frame.height(height + 15);
    });
</script>

(단, 크로스 브라우저 기능에 대한 가져다줄래요 협력했습니다 합니다.

해설 (0)

다음은 몇 가지 방법:

또 다른 대체 및

Alt 나티우스 스크롤하지 숨기기 위해 위와 같이 2 개 포함)

두 번째 코드를 기술로 해킹할

이루어질 수 있는 iFrame, 상위입니다 화면 이동난 숨김니다 &quot overflow:hidden"; 스크롤바 및 iFrame 이루어질 수 있는 폭과 높이를 검색하기를 숨기십시오 upto 150% # 39, 이후 화면 이동난 강제로 위부의 페이지에서든 바디입니다 doesn& 화면 이동난 않을 수 없는 한 작성되지는 iframe 의 경계를 충족시켰습니다 호출이네요 이 감춰집니다 iFrame 의 이 스크롤바 완벽하게 너버!

출처: 세트 [iframe 자동 높이] (https://stackoverflow.com/questions/5867985/iframe-100-height)

Community
편집된 답변23일 5월 2017 в 11:47
해설 (1)

위의 모든 방법을 사용하여 작업할 수 없습니다.

javascript:

function resizer(id) {
        var doc = document.getElementById(id).contentWindow.document;
        var body_ = doc.body, html_ = doc.documentElement;

        var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
        var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);

        document.getElementById(id).style.height = height;
        document.getElementById(id).style.width = width;

    }

html:

<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv"  >
         <input id="txtHeight"/>height     <input id="txtWidth"/>width     



</div>

Env: IE 10, 윈도 7 x64

해설 (0)

또 다른 솔루션을 아웃해야 실험 후 일부 생각했어요. # 39, & # 39 로 표시된, best answer& 내가 처음 시도해 코드 이 질문에 및 it didn& # 39, 빗나갔다. 내 생각엔 내 iframe 때문에 당시 내 프로그램이 동적으로 생성된. 다음은 코드 아이 유즈드 (된다고 가져다줄래요):

Javascript iframe 내부의 로드되는:

window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };

&gt. 4 개 이상의 픽셀입니다 높이 지루려면 화면 이동난 추가할 필요가 있다 (일부 이상한 버그 / 효과를 iframe). 너비입니다 추가할 수 있는 것은 더욱 낯선 사람, 틀렸다니까 안전하다구요 18px 너비입니다 바디입니다. 또한 대한 css 를 확보할 수 있도록 iframe 바디입니다 발려짐 (아래).

html, body {
   margin:0;
   padding:0;
   display:table;
}

iframe {
   border:0;
   padding:0;
   margin:0;
}

다음은 html 에서 iframe:

내 모든 코드 슬라이드에서는 iframe:




    <meta charset="utf-8">
    File Upload

    html, body {
        margin:0;
        padding:0;
        display:table;
    }

    <script type="text/javascript">
    window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };
    </script>


    This is a test.<br>
    testing

저는 크롬, 파이어폭스 (windows xp 에서) 에 있는 작은 테스트 완료. 난 아직 더 많은 테스트를 해야 하는 방법을 알려주세요 너무 잘 어울려.

해설 (2)

This is how I would do it (테스트를 FF / 크롬):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>
해설 (2)

I found to work) 이 레이저 우수:

function resizer(id)
{

    var doc = document.getElementById(id).contentWindow.document;
    var body_ = doc.body;
    var html_ = doc.documentElement;

    var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight,     html_.scrollHeight, html_.offsetHeight );
    var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

    document.getElementById(id).height = height;
    document.getElementById(id).width = width;

}

스타일입니까 기록하십시오 객체인지 재거됨.

ctrl-alt-delor
편집된 답변20일 11월 2015 в 7:07
해설 (0)

누군가 경우 생길 수 있습니다. 나에게 문제가 있는 솔루션 제거했을 때 일부러 이 iframe 의 iframe - div 잡을라는데 짧은.

There is an 있는 Jquery 플러그인에는 산아래의 작업:

http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

해설 (0)

Jquery 의 경우 이 값은 다는일은, 정말 최고의 선택이 돕는다구요!! 잠깐 도와주는!

iframe

jQuery

<script>            
        var valueSize = $( "#iframe" ).offset();
        var totalsize = (valueSize.top * 2) + valueSize.left;

        $( "#iframe" ).height(totalsize);            

</script>
해설 (0)
  • Javascript header:* 배치할 수
function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      }
  • Iframe html 번호:* 댁이라면 열렸으니까.
  • Css 스타일시트가 *

&gt.

.spec_iframe {
        width: 100%;
        overflow: hidden;
    }
해설 (0)

컨텍스트로

이렇게 할 수 있는 웹 확장명은 관점에서 볼 수 있었습니다. 이 UI 를 각 페이지 안에 살고 있으며, 이 ᅴ 웹 확장명은 일부 블렌드합니다 사용한다 'iframe'. 그래서 ',' 동적입니다 컨텐트에서 iframe 내부의 폭과 높이를 iframe '' 다시 조정할 수 있다.

내가 사용하는 그러나 이 개념은 모든 라이브러리란 qic 반응을 보인다.

내 솔루션 (여기서는 모두 관리할 수 있는 페이지 및 iframe)

'난' 스타일 '정말로' iframe 내부의 변경일 바디입니다 대량량 치수에는. 이렇게 하면 필요한 모든 공간 안에 있는 요소를 사용하여 배치하기. '있다' 와 '높이' didn& 너버 100% # 39, t work for me (내 생각 때문에 iframe 에 기본 'width = 300px' 와 '높이 = 150px')

/* something like this */
body {
  width: 99999px;
  height: 99999px;
}

그럼 좀 하면서 모든 iframe ᅴ 안에 div 와 제공했음 시켜버리므로

#ui-root {
  display: 'inline-block';     
}

내 안에 '# ᅴ 루트 렌더링합니다 app 이 후' (in 나는한다 compon랑디드문트 반응할 수 있는 '이') 이 같은 계산을 치수에는 내가 그들에게 빈다우스포스트 세이지 사용하여 페이지를 상위입니다 div 및 동기화 '':

let elRect = el.getBoundingClientRect()
window.parent.postMessage({
  type: 'resize-iframe',
  payload: {
    width: elRect.width,
    height: elRect.height
  }
}, '*')

상위 프레임을 나는한다 이 같은 일이.

window.addEventListener('message', (ev) => {
  if(ev.data.type && ev.data.type === 'resize-iframe') {
    iframe.style.width = ev.data.payload.width + 'px'
    iframe.style.height = ev.data.payload.height + 'px'
  }
}, false)
bboydflo
편집된 답변7일 9월 2018 в 6:21
해설 (0)