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

Question

У меня есть страница справки 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>

Answer 1

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

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

Поскольку некоторые браузеры (более старые Safari и Opera) сообщают, что загрузка завершена до того, как CSS-рендеринг, вам нужно установить микро-таймаут, очистить и переназначить src iframe,

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

Answer 2

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

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

---

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

Используйте jQuery iFrame, чтобы измерить высоту тела вашего 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 );

Answer 3

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

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

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

Answer 4

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

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

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

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

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

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

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

Answer 6

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

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

Answer 7

простой однострочный начинается с минимальной высоты по умолчанию и увеличивается до размера содержимого.

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

Answer 8

Принятый ответ $('iframe').load теперь будет выдавать ошибку a.indexOf is not a function.Может быть обновлено до:

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

Несколько других, похожих на .load, устарели после jQuery 1.8: Ошибка «Uncaught TypeError: a.indexOf не является функцией» при открытии нового базового проекта