jquery get height of iFrame content when loaded

Mniej skomplikowaną odpowiedzią jest użycie .contents(), aby dostać się do iframe. Co ciekawe, zwraca inną wartość niż to, co otrzymuję za pomocą kodu w mojej pierwotnej odpowiedzi, ze względu na wyściółkę na ciele, jak sądzę.

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

W ten sposób zrobiłem to dla komunikacji między domenami, więc obawiam się, że to może niepotrzebnie skomplikowane. Po pierwsze, umieściłbym jQuery wewnątrz dokumentu iFrame; to pochłonie więcej pamięci, ale nie powinno wydłużyć czasu ładowania, ponieważ tylko skrypt musi być załadowany raz.

Użyj jQuery iFrame 'a, aby zmierzyć wysokość ciała iframe' a tak wcześnie, jak to możliwe (onDOMReady), a następnie Ustaw hash adresu URL na tę wysokość. W dokumencie nadrzędnym Dodaj zdarzenie onload do znacznika iFrame, które spojrzy na lokalizację ramki iframe i wyodrębni potrzebną wartość. Ponieważ onDOMReady będzie zawsze występował przed wydarzeniem ładowania dokumentu, możesz być dość pewien, że wartość zostanie poprawnie przekazana bez warunku wyścigu komplikuje sprawy.

Innymi słowy:

...W pomocy.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);

...oraz w dokumencie nadrzędnym:

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

Znalazłem następujące do pracy na Chrome, Firefox i IE11:

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

Gdy zawartość ramek iFrame zostanie załadowana, zdarzenie zostanie wywołane i ustawi wysokość ramek iframe na wysokość jego zawartości. Będzie to działać tylko dla stron w tej samej domenie, co w ramce IFrame.

Nie potrzebujesz do tego jquery wewnątrz ramki iframe, ale używam go, ponieważ kod jest o wiele prostszy...

Umieść to w dokumencie wewnątrz ramki iframe.

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

Dodano pięć powyżej, aby wyeliminować pasek przewijania w małych oknach, nigdy nie jest idealny pod względem rozmiaru.

I to wewnątrz twojego dokumentu rodzica.

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

Kod do zrobienia tego bez jQuery jest obecnie trywialny:

const frame = document.querySelector('iframe')
function syncHeight() {
  this.style.height = `${this.contentWindow.document.body.offsetHeight}px`
}
frame.addEventListener('load', syncHeight)

Aby odłączyć Zdarzenie:

frame.removeEventListener('load', syncHeight)

To jest poprawna odpowiedź, która zadziałała dla mnie

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

Zaakceptowana odpowiedź {[1] } spowoduje teraz błąd a.indexOf is not a function. Można aktualizować do:

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

Kilka innych podobnych do .load przestarzałych od jQuery 1.8: błąd "Uncaught TypeError: a. indexOf nie jest funkcją" podczas otwierania nowego projektu Fundacji