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

Question 1

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>

Question 2

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

$('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';
}

Question 3

덜 복잡한 대답은 .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 );

Question 4

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

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

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

Question 5

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)

Question 6

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

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

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

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

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

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

Question 7

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

$(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();
    });

Question 8

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

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

스 니펫 확장