[javascript] 내용에 맞게 iframe의 너비와 높이를 조정합니다

JAVASCRIPT / 글쓴이

나는에 대한 해결책이 필요 자동 조정 을 width하고 height의 iframe거의 그 내용에 맞게합니다. 요점은 iframe로드 된 후에 너비와 높이를 변경할 수 있다는 것 입니다. iframe에 포함 된 몸체의 크기 변경을 처리하기 위해 이벤트 작업이 필요하다고 생각합니다.

답변

<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>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

답변

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

iFrame의 컨텐츠 크기를 유지하고 iFrame과 호스트 페이지간에 통신 하는 데 사용 되는 교차 보우 저, 교차 도메인 라이브러리 . jQuery를 사용하거나 사용하지 않고 작동합니다.mutationObserverpostMessage

답변

지금까지 제공된 모든 솔루션은 단 한 번의 크기 조정 만 설명합니다. 내용이 수정 된 후 iFrame의 크기를 조정할 수 있다고 언급했습니다. 이렇게하려면 iFrame 내에서 함수를 실행해야합니다 (내용이 변경되면 내용이 변경되었다는 이벤트를 발생시켜야 함).

iFrame 내부의 코드가 iFrame 내부의 DOM으로 제한되어 iFrame을 편집 할 수없는 것처럼 보였고 iFrame 외부에서 실행 된 코드가 iFrame 외부의 DOM과 붙어 있었기 때문에 잠시 동안이 문제가 발생했습니다. → iFrame 내부에서 오는 이벤트를 선택하십시오.

해결책은 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>

답변

임베드 용 단일 라이너 솔루션 : 최소 크기로 시작하여 컨텐츠 크기가 증가합니다. 스크립트 태그가 필요 없습니다.

<iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>

스 니펫 확장

답변

iframe 컨텐츠가 동일한 도메인에서 온 경우에는 효과적입니다. 그래도 jQuery가 필요합니다.

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

동적으로 크기를 조정하려면 다음을 수행하십시오.

<script language="javaScript">
<!--
function autoResize(){
    $('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>

그런 다음 iframe 이로 드되는 페이지에서 다음을 추가하십시오.

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

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

답변

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

답변

지구상의 모든 것을 시도한 후에 이것은 실제로 저에게 효과적입니다.

index.html

<style type="text/css">
html, body{
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0px;
}
</style>
<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>

<iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>