jquery получает высоту содержимого iframe при загрузке

менее сложный ответ заключается в использовании .contents() чтобы добраться до iframe. Интересно, однако, что он возвращает другое значение от того, что я получаю, используя код в моем исходном ответе, из-за заполнения на теле, я считаю.

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

---

вот как я сделал это для междоменной связи, поэтому я боюсь, что это, возможно, излишне сложно. Во-первых, я бы поместил jQuery в документ iFrame; это будет потреблять больше памяти, но не должно увеличивать время загрузки так как скрипт нужно загружать только один раз.

используйте jQuery iFrame для измерения высоты тела вашего iframe как можно раньше (onDOMReady), а затем установите хэш URL на эту высоту. И в Родительском документе, добавьте onload событие для тега iFrame, который будет смотреть на местоположение iframe и извлекать нужное значение. Поскольку onDOMReady всегда будет происходить до события загрузки документа, вы можете быть уверены, что значение будет правильно передано без расовое состояние все усложняет.

другими словами:

...в помощь.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 внутри iframe, но я использую его, потому что код намного проще...

поместите это в документ внутри вашего iframe.

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

добавлено пять выше, чтобы устранить полосу прокрутки на маленьких окнах, она никогда не идеальна по размеру.

и это внутри вашего родительского документа.

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

код для этого без 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)

это правильный ответ, который работал для меня

$(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').load теперь будет производить a.indexOf is not a function ошибка. Можно обновить до:

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

несколько других подобных .load устарел с jQuery 1.8:ошибка" Uncaught TypeError: a.indexOf не является функцией " при открытии нового проекта foundation