Установите высоту iframe для внутреннего содержимого (в том же домене)

Question

У меня есть встроенный фрейм на моей странице - это только часть моей страницы, а не вся эта вещь.Я динамически перезагружаю iframe и хочу, чтобы он менялся в соответствии с высотой содержимого в нем.

Содержимое находится в том же домене, поэтому (надеюсь?) Нет необходимости в таком сложном решении, как данноев Изменение размера фрейма в зависимости от содержимого .

Это код, который я использую для изменения его размера, но он не работает.Кадр перезагружается нормально, но высота всегда остается неизменной.Кто-нибудь может посоветовать?

Я также попробовал лучшее решение в Как автоматически изменить размер iframe без какой-либо удачи.

Я думаю, это может быть потому, что страница внутриЗагрузка iframe занимает некоторое время, поэтому он не завершил загрузку к моменту установки высоты.Возможно.

<iframe frameborder=0 border=0 src="" width="100%" height="400px" name="commentframe" id="commentframe"></iframe>
function reload_frame(uid) {
    document.getElementById('commentframe').src = "comments.html?" + uid;
    document.getElementById('commentframe').height = document.getElementById('commentframe').contentWindow.document.body.scrollHeight + "px";
}

Обновление:

Попытка без удачи:

<iframe frameborder=0 border=0 src="" width="100%" height="400px" name="commentframe" id="commentframe" onload="reload_frame()"></iframe>
function reload_frame() {
        var commentframe = document.getElementById('commentframe');
        commentframe.style.height = (commentframe.scrollHeight + 10).toString() + "px";
}

Изменение размера фрейма, но только до + 10px от его первоначальной высоты -если содержание длиннее этого, оно все еще скрыто.

Может быть, мне нужно событие onload внутри тела самого iframe?

Answer 1

<script type="text/javascript">
    function ajustHeight() {
        $("#myIframe").parent()[0].style.height = ($("#myIframe")[0].scrollHeight + 150).toString() + "px";
    }
</script>
<iframe id="myIframe" src="mypage.html" width="100%" height="100%" onload="ajustHeight()"></iframe>

Answer 2

В современных браузерах и со многими типами документов scrollHeight будет возвращать высоту iframe, рассчитанную браузером, а не высоту содержимого, поэтому в большинстве случаев приведенные выше фрагменты работать не будут.

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

JS:

$('#ifm').load(function() {
  $(this).height( $(this)[0].contentWindow.document.body.scrollHeight + 24);
});

HTML:

<iframe id="ifm  src="..."></iframe>

Обратите внимание, что это будет работать, только если URL-адрес iframeна точно таком же домене страницы, содержащей сам iframe.

Answer 3

без jquery:

<script type="text/javascript">
    window.onload = function() {
        var iframe = document.getElementById("blogFrame");
        iframe.parentNode.style.height = iframe.scrollHeight + "px";
    }
</script>