jquery obtener la altura del contenido iframe cuando se carga

La respuesta menos complicada es usar .contents() para llegar al iframe. Curiosamente, sin embargo, devuelve un valor diferente de lo que obtengo usando el código en mi respuesta original, debido al relleno en el cuerpo, creo.

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

Así es como lo he hecho para la comunicación entre dominios, así que me temo que es innecesariamente complicado. Primero, pondría jQuery dentro del documento del iFrame; esto consumirá más memoria, pero no debería aumentar el tiempo de carga ya que solo el script necesita ser cargado una vez.

Use el jQuery del iFrame para medir la altura del cuerpo del iframe lo antes posible (onDOMReady) y luego establezca el hash de URL a esa altura. Y en el documento padre, agregue un evento onload a la etiqueta iFrame que verá la ubicación del iframe y extraerá el valor que necesita. Debido a que onDOMReady siempre ocurrirá antes del evento de carga del documento, puede estar bastante seguro de que el valor se comunicará correctamente sin una condición de carrera complicando las cosas.

En otras palabras:

Help en ayuda.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);

...y en el documento padre:

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

Encontré lo siguiente para trabajar en Chrome, Firefox e IE11:

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

Cuando el contenido de Iframes termine de cargar, el evento se activará y establecerá la altura de IFrames a la de su contenido. Esto solo funcionará para las páginas dentro del mismo dominio que el del IFrame.

No necesitas jquery dentro del iframe para hacer esto, pero lo uso porque el código es mucho más simple...

Ponga esto en el documento dentro de su iframe.

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

Se agregaron cinco anteriores para eliminar la barra de desplazamiento en ventanas pequeñas, nunca es perfecto en tamaño.

Y esto dentro de su documento padre.

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

El código para hacer esto sin jQuery es trivial hoy en día:

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

Para desenganchar el evento:

frame.removeEventListener('load', syncHeight)

Esta es la respuesta correcta que funcionó para mí

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

Las respuestas aceptadas $('iframe').load ahora producirán a.indexOf is not a function error. Se puede actualizar a:

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

Algunos otros similares a .load obsoletos desde jQuery 1.8: " Uncaught TypeError: a.indexOf is not a function " error al abrir un nuevo proyecto foundation