jquery는로드 될 때 iframe 콘텐츠의 높이를 가져옵니다.

main.php의 iframe에로드중인 도움말 페이지 help.php가 있습니다. iframe에로드 된 페이지의 높이를 어떻게 알 수 있습니까?

iframe의 높이를 100 % 또는 자동으로 스타일링 할 수 없기 때문에 이것을 묻습니다. 그래서 자바 스크립트를 사용해야한다고 생각합니다. jQuery를 사용하고 있습니다.

CSS :

body {
    margin: 0;
    padding: 0;
}
.container {
    width: 900px;
    height: 100%;
    margin: 0 auto;
    background: silver;
}
.help-div {
    display: none;
    width: 850px;
    height: 100%;
    position: absolute;
    top: 100px;
    background: orange;
}
#help-frame {
    width: 100%;
    height: auto;
    margin:0;
    padding:0;
}

JS :

$(document).ready(function () {
    $("a.open-help").click(function () {
        $(".help-div").show();
        return false;
    })
})

HTML :

<div class='container'>
    <!-- -->
    <div class='help-div'>
        <p>This is a div with an iframe loading the help page</p>
        <iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
    </div>  <a class="open-help" href="#">open Help in iFrame</a>

    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
</div>

좋아 마침내 좋은 해결책을 찾았습니다.

$('iframe').load(function() {
    this.style.height =
    this.contentWindow.document.body.offsetHeight + 'px';
});

일부 브라우저 (이전 Safari 및 Opera)는 CSS가 렌더링되기 전에 온로드가 완료되었다고보고하므로 마이크로 타임 아웃을 설정하고 비워두고 iframe의 src를 다시 할당해야합니다.

$('iframe').load(function() {
    setTimeout(iResize, 50);
    // Safari and Opera need a kick-start.
    var iSource = document.getElementById('your-iframe-id').src;
    document.getElementById('your-iframe-id').src = '';
    document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
    document.getElementById('your-iframe-id').style.height = 
    document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}

덜 복잡한 대답은 .contents()iframe에 도달하는 데 사용 하는 것입니다. 그러나 흥미롭게도 본문의 패딩으로 인해 원래 답변에서 코드를 사용하여 얻은 것과 다른 값을 반환합니다.

$('iframe').contents().height() + 'is the height'

이것이 도메인 간 통신을 위해 수행 한 방법이므로 불필요하게 복잡 할 수 있습니다. 먼저 iFrame의 문서에 jQuery를 넣습니다. 이렇게하면 더 많은 메모리를 소비하지만 스크립트를 한 번만로드하면되므로로드 시간이 늘어나서는 안됩니다.

iFrame의 jQuery를 사용하여 가능한 한 빨리 (onDOMReady) iframe 본문의 높이를 측정 한 다음 URL 해시를 해당 높이로 설정합니다. 그리고 상위 문서 onload에서 iframe의 위치를 ​​확인하고 필요한 값을 추출 하는 이벤트를 iFrame 태그에 추가 합니다. onDOMReady는 항상 문서의로드 이벤트 전에 발생하기 때문에 경쟁 조건이 문제를 복잡하게하지 않고 값이 올바르게 전달 될 것이라고 확신 할 수 있습니다.

다시 말해:

... Help.php에서 :

var getDocumentHeight = function() {
    if (location.hash === '') { // EDIT: this should prevent the retriggering of onDOMReady
        location.hash = $('body').height(); 
        // at this point the document address will be something like help.php#1552
    }
};
$(getDocumentHeight);

... 그리고 상위 문서에서 :

var getIFrameHeight = function() {
    var iFrame = $('iframe')[0]; // this will return the DOM element
    var strHash = iFrame.contentDocument.location.hash;
    alert(strHash); // will return something like '#1552'
};
$('iframe').bind('load', getIFrameHeight );

Chrome, Firefox 및 IE11에서 작동하는 다음을 발견했습니다.

$('iframe').load(function () {
    $('iframe').height($('iframe').contents().height());
});

Iframes 콘텐츠로드가 완료되면 이벤트가 실행되고 IFrames 높이가 해당 콘텐츠의 높이로 설정됩니다. 이는 IFrame과 동일한 도메인 내의 페이지에서만 작동합니다.

jQuery없이이 작업을 수행하는 코드는 요즘 사소합니다.

const frame = document.querySelector('iframe')
function syncHeight() {
  this.style.height = `${this.contentWindow.document.body.offsetHeight}px`
}
frame.addEventListener('load', syncHeight)

이벤트 후크를 해제하려면 :

frame.removeEventListener('load', syncHeight)

이 작업을 수행하기 위해 iframe 내부에 jquery가 필요하지는 않지만 코드가 훨씬 간단하기 때문에 사용합니다.

이것을 iframe 내부의 문서에 넣으십시오.

$(document).ready(function() {
  parent.set_size(this.body.offsetHeight + 5 + "px");  
});

작은 창에서 스크롤바를 제거하기 위해 위에 5 개를 추가했지만 크기가 완벽하지는 않습니다.

그리고 이것은 부모 문서 안에 있습니다.

function set_size(ht)
{
$("#iframeId").css('height',ht);
}

이것은 나를 위해 일한 정답입니다

$(document).ready(function () {
        function resizeIframe() {
            if ($('iframe').contents().find('html').height() > 100) {
                $('iframe').height(($('iframe').contents().find('html').height()) + 'px')
            } else {
                setTimeout(function (e) {
                    resizeIframe();
                }, 50);
            }
        }
        resizeIframe();
    });

간단한 한 줄은 기본 최소 높이로 시작하여 내용 크기로 증가합니다.

<iframe src="http://url.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').load은 이제 a.indexOf is not a function오류를 생성 합니다. 다음으로 업데이트 할 수 있습니다.

$('iframe').on('load', function() {
  // ...
});

.loadjQuery 1.8 이후 더 이상 사용되지 않는 것과 비슷한 다른 몇 가지 : 새 기초 프로젝트를 열 때 "Uncaught TypeError : a.indexOf is not a function"오류

iframe 내부에서 SPA와 함께 작동 할 수있는 jQuery 무료 솔루션입니다.

document.getElementById('iframe-id').addEventListener('load', function () {
  let that = this;
  setTimeout(function () {
    that.style.height = that.contentWindow.document.body.offsetHeight + 'px';
  }, 2000) // if you're having SPA framework (angularjs for example) inside the iframe, some delay is needed for the content to populate
});

이것은 내 ES6 친화적 인 no-jquery입니다.

document.querySelector('iframe').addEventListener('load', function() {
    const iframeBody = this.contentWindow.document.body;
    const height = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight);
    this.style.height = `${height}px`;
});