jquery obtiene la altura del contenido de iframe cuando se carga

Solución:

ok finalmente encontré una buena solución:

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

Debido a que algunos navegadores (Safari y Opera más antiguos) informan que la carga se completó antes de que CSS se procese, debe establecer un tiempo de espera micro y dejar en blanco y reasignar el src del 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';
}

La respuesta menos complicada es usar .contents() para obtener el iframe. Curiosamente, sin embargo, devuelve un valor diferente del 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, por lo que me temo que tal vez sea innecesariamente complicado. Primero, pondría jQuery dentro del documento de iFrame; esto consumirá más memoria, pero no debería aumentar el tiempo de carga ya que el script solo necesita cargarse una vez.

Use jQuery de iFrame para medir la altura del cuerpo de su iframe lo antes posible (onDOMReady) y luego configure el hash de la URL a esa altura. Y en el documento principal, agregue un onload evento a la etiqueta iFrame que buscará 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 que complique las cosas.

En otras palabras:

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

… y en el documento principal:

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é que lo siguiente funciona en Chrome, Firefox e IE11:

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

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

---

---

Utiliza Nuestro Buscador