jquery - available - iframe height relative to content

jquery obtiene la altura del contenido del iframe cuando está cargado

Question

Tengo una página de Ayuda, help.php que estoy cargando dentro de un iframe en main.php. ¿Cómo puedo obtener el alto de esta página una vez que se ha cargado en el iframe?

Lo estoy preguntando porque no puedo ajustar la altura de iframe al 100% o automático. Es por eso que creo que necesito usar javascript ... Estoy usando 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

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)

Answer 2

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

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

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

Answer 3

La $(''iframe'').load aceptada $(''iframe'').load Ahora producirá un a.indexOf is not a function error de a.indexOf is not a function . Se puede actualizar a:

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

Pocos otros similares a .load obsoletos desde jQuery 1.8: error "UnEught TypeError: a.indexOf no es una función" al abrir un nuevo proyecto de fundación

Answer 4

La respuesta menos complicada es usar .contents() para obtener el 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 hice para la comunicación entre dominios, así que me temo que quizás sea 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 el script solo necesita cargarse una vez.

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

Answer 5

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

Pon esto en el documento dentro de tu iframe.

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

agregó cinco arriba para eliminar la barra de desplazamiento en ventanas pequeñas, nunca es perfecto en tamaño.

Y esto dentro de tu documento principal.

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

Answer 6

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

Answer 7

ok Finalmente encontré una buena solución:

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

Debido a que algunos navegadores (los antiguos Safari y Opera) informan de que la carga se completó antes de que se procesen CSS, necesita establecer un Micro Timeout y borrar 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'';
}