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

У меня есть страница справки, help.php, которую я загружаю внутри iframe в main.php Как я могу получить высоту этой страницы после ее загрузки в iframe?

Я спрашиваю об этом, потому что я не могу создать высоту iframe до 100% или автоматически. Вот почему я думаю, что мне нужно использовать javascript. Я использую 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>

ОТВЕТЫ

Ответ 1

ok Наконец-то я нашел хорошее решение:

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

Ответ 2

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

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

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

Используйте iFrame jQuery для измерения высоты вашего тела iframe как можно раньше (onDOMReady), а затем установите хеш-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 );

Ответ 3

Я нашел следующее для работы в Chrome, Firefox и IE11:

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

Когда содержимое Iframes будет загружено, событие будет срабатывать, и он будет устанавливать высоту IFrames в соответствии с ее содержимым. Это будет работать только для страниц в том же домене, что и для IFrame.

Ответ 4

Вам не нужен jquery внутри iframe, но я использую его, потому что код намного проще...

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

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

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

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

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

Ответ 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)