Ajuste el ancho y la altura del iframe para que se ajuste al contenido

300

Necesito una solución para autoajustar el widthy heightde un iframepara apenas ajustarse a su contenido. El punto es que el ancho y la altura se pueden cambiar después de que iframese haya cargado. Supongo que necesito una acción de evento para lidiar con el cambio en las dimensiones del cuerpo contenido en el iframe.

Corazón de piedra
fuente
Altura automática de iFrame angular: gitlab.com/reduardo7/angular-iframe-auto-height
Eduardo Cuomo
La respuesta aceptada no funciona. Pruebe stackoverflow.com/a/31513163/482382
Steven Shaw el

Respuestas:

268
<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>
Ahmy
fuente
8
@StoneHeart: sí, es un navegador cruzado. El código no cumple con los estándares debido a la propiedad contentWindow, que no está definida en la especificación DOM. En la especificación DOM existe una propiedad llamada contentDocument, pero Internet Explorer 6 (¿y 7?) No la admite. La propiedad contentWindow se puede usar en su lugar y se implementa en todos los navegadores comunes (Gecko, Opera, Webkit, IE).
Rafael
30
¿De qué sirve if (document.getElementById)?
Aliado el
55
Además, no olvide que no es dominio cruzado. Motivo por el cual se produce un tipo de error: permiso denegado para acceder al 'documento' de propiedad si el dominio es diferente. Una solución se puede encontrar aquí
Pierre de LESPINAY
15
El condicional no solo es inútil, sino que, en las raras circunstancias, está destinado a causar problemas. ¿Por qué está verificando para ver si existe un método y luego está usando el método fuera de la verificación?
JS
66
Creo que quisiste decir DOMContentLoaded, ya DOMContentReadyque no parece ser una cosa: developer.mozilla.org/en-US/…
Max Heiber
46

Complemento de navegador cruzado jQuery .

Cross-bowser, biblioteca de dominio cruzado que se utiliza mutationObserverpara mantener iFrame dimensionado para el contenido y postMessagepara comunicarse entre iFrame y la página de host. Funciona con o sin jQuery.

FFish
fuente
3
La biblioteca iframe-resizer es la solución más sólida.
kwill
35

Todas las soluciones dadas hasta ahora solo representan un cambio de tamaño único. Menciona que desea poder cambiar el tamaño del iFrame después de modificar el contenido. Para hacer esto, debe ejecutar una función dentro del iFrame (una vez que se cambia el contenido, debe activar un evento para decir que el contenido ha cambiado).

Estuve atascado con esto por un tiempo, ya que el código dentro del iFrame parecía limitado al DOM dentro del iFrame (y no podía editar el iFrame), y el código ejecutado fuera del iFrame estaba atascado con el DOM fuera del iFrame (y no podía ' t recoger un evento que viene desde dentro del iFrame).

La solución vino al descubrir (a través de la asistencia de un colega) que a jQuery se le puede decir qué DOM usar. En este caso, el DOM de la ventana principal.

Como tal, un código como este hace lo que necesita (cuando se ejecuta dentro del iFrame):

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#IDofControlFiringResizeEvent").click(function () {
            var frame = $('#IDofiframeInMainWindow', window.parent.document);
            var height = jQuery("#IDofContainerInsideiFrame").height();
            frame.height(height + 15);
        });
    });
</script>
Garnaph
fuente
¿Cuál sería el código completo para esto? Supongo que el script va en el iframe html?
Andrew Hundt
Este es el código completo, y sí, se ejecuta dentro del HTML del iFrame. La parte "window.parent.document" especifica que el selector jQuery debe usar el DOM del documento principal y no el documento en el que se encuentra (que está dentro del iFrame).
Garnaph
13
Esto funciona muy bien si el documento padre y el documento en el iframe son del mismo dominio . Si no lo están (o, en Chrome, si ambos son archivos locales ), las políticas de seguridad del "mismo origen" de los navegadores entran en acción y evita que el contenido del iframe modifique el documento principal.
user56reinstatemonica8
1
Para cualquiera que intente hacer que algo como esto funcione entre dominios, busque en window.postMessage (IE8 +) y tenga en cuenta que necesitará scripts personalizados tanto en el host (padre) como en los documentos de origen (dentro del iframe). El plugin jQuery postmessage podría ayudar. Como necesitará secuencias de comandos en el host y la fuente, puede ser más fácil que AJAX cargue el contenido con JSON-P.
user56reinstatemonica8
3
¿Cómo disparar el evento automáticamente en lugar de jQuery("#IDofControlFiringResizeEvent").click(function ()?
Ben
33

Solución de una sola línea para incrustaciones: comienza con un tamaño mínimo y aumenta al tamaño del contenido. No hay necesidad de etiquetas de script.

<iframe src="http://URL_HERE.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>

Chico
fuente
Ejecutar fragmento de código no funciona con Safari 9.1.1 ¿quizás incluya un problema de SO?
Elensar
No es dominio cruzado. ¿Quizás el servidor necesita agregar algunos encabezados a la página enmarcada?
Finesse
Todas las respuestas que mencionamos aquí scrollHeight/scrollWidthdeben ajustarse un poco para tener en cuenta los márgenes corporales. Los navegadores aplican márgenes predeterminados distintos de cero para el elemento del cuerpo de los documentos (y también es aplicable al contenido cargado en marcos). La solución de trabajo que he encontrado es que añadir lo siguiente: parseInt(window.getComputedStyle(this.contentDocument.body).margin.
Stan
24

Si el contenido del iframe es del mismo dominio, esto debería funcionar muy bien. Sin embargo, requiere jQuery.

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

Para que cambie su tamaño dinámicamente, puede hacer esto:

<script language="javaScript">
<!--
function autoResize(){
    $('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>

Luego, en la página que carga el iframe, agregue esto:

<script language="javaScript">
function resize()
{
    window.parent.autoResize();
}

$(window).on('resize', resize);
</script>
brenjt
fuente
¿Hay alguna forma simple de hacer esto cuando el origen es de un dominio diferente?
BruceJohnJennerLawso
15

Aquí hay una solución de navegador cruzado si no desea usar jQuery:

/**
 * Resizes the given iFrame width so it fits its content
 * @param e The iframe to resize
 */
function resizeIframeWidth(e){
    // Set width of iframe according to its content
    if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
        e.width = e.contentWindow.document.body.scrollWidth;
    else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
        e.width = e.contentDocument.body.scrollWidth + 35;
    else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
        e.width = e.contentDocument.body.offsetWidth + 35;
}
Timo
fuente
1
Eso es extraño. Para mí, calcula un ancho muy extraño de iframe. el ancho del contenido es de 750 y lo calcula como 300. ¿Tiene ideas por qué?
Rob
Jugué con este código (agregando opciones de altura). Si configuro la altura del iFrame al 100%, la restringe a aproximadamente 200 px. Si configuro la altura del iFrame en 600px, se queda con eso. @RobertJagoda ¿obtuviste una solución para esto?
iaindownie
9

Después de haber probado todo en la tierra, esto realmente funciona para mí.

index.html

<style type="text/css">
html, body{
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0px;   
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>
Adrian P.
fuente
dice: TypeError no capturado: $ no es una función en autoResize ((index): 200) en HTMLIFrameElement.onload ((index): 204)
Michael Rogers
2
@Michael Rogers Hay un conflicto con $ u olvida incluir el archivo jQuery.js. Use una función genérica stackoverflow.com/questions/6109847/… o reemplace $ con jQuery
Adrian P.
8

Estoy usando este código para ajustar automáticamente la altura de todos los iframes (con la clase autoHeight) cuando se cargan en la página. Probado y funciona en IE, FF, Chrome, Safari y Opera.

function doIframe() {
    var $iframes = $("iframe.autoHeight"); 
    $iframes.each(function() {
        var iframe = this;
        $(iframe).load(function() {
            setHeight(iframe);
        });
    });
}

function setHeight(e) {
  e.height = e.contentWindow.document.body.scrollHeight + 35;
}

$(window).load(function() {
    doIframe();
});
petriq
fuente
2
¿Qué es este magic 35 que estás agregando? ¿Para qué navegador y sistema operativo lo midió?
h2stein
Ahora realmente no sé por qué agregué 35 píxeles. Pero ciertamente puedo decirte que lo probé en FF, IE (7, 8, 9) y Chrome y que he funcionado bien.
petriq
3
Creo que 35 es solo el grosor de la barra de desplazamiento
Sadegh
Tuve que ajustar esto un poco para que funcione: llamado setHeight (iframe); directamente (eliminó el envoltorio $ (iframe) .load () a su alrededor.
shacker
Los 35 píxeles mágicos agregados son para tener en cuenta el relleno del iframe. Agregaría que el iframe no debe contener relleno, el contenido de los iframes debería encargarse de esto.
Filipe Melo
5

Esta es una solución sólida

function resizer(id)
{

var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;

var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;

}

el html

<IFRAME SRC="blah.php" id="iframe1"  onLoad="resizer('iframe1');"></iframe>
Mas
fuente
3

Modifiqué ligeramente la gran solución de Garnaph anterior. Parecía que su solución modificó el tamaño del iframe en función del tamaño justo antes del evento. Para mi situación (envío por correo electrónico a través de un iframe), necesitaba cambiar la altura del iframe justo después del envío. Por ejemplo, mostrar errores de validación o mensaje de "agradecimiento" después del envío.

Acabo de eliminar la función click () anidada y la puse en mi iframe html:

<script type="text/javascript">
    jQuery(document).ready(function () {
        var frame = $('#IDofiframeInMainWindow', window.parent.document);
        var height = jQuery("#IDofContainerInsideiFrame").height();
        frame.height(height + 15);
    });
</script>

Funcionó para mí, pero no estoy seguro acerca de la funcionalidad del navegador cruzado.

udackds
fuente
3

Si puede controlar tanto el contenido de IFRAME como la ventana principal, entonces necesita el iFrame Resizer .

Esta biblioteca permite el cambio de tamaño automático de la altura y el ancho de los iFrames iguales y de dominio cruzado para adaptarse a su contenido contenido. Proporciona una variedad de características para abordar los problemas más comunes con el uso de iFrames, que incluyen:

  • Ajuste de altura y anchura del iFrame al tamaño del contenido.
  • Funciona con iFrames múltiples y anidados.
  • Autenticación de dominio para iFrames de dominio cruzado.
  • Proporciona una variedad de métodos de cálculo de tamaño de página para admitir diseños CSS complejos.
  • Detecta cambios en el DOM que pueden hacer que la página cambie de tamaño usando MutationObserver.
  • Detecta eventos que pueden hacer que la página cambie de tamaño (cambio de tamaño de ventana, animación y transición CSS, cambio de orientación y eventos del mouse).
  • Mensajería simplificada entre iFrame y la página de host a través de postMessage.
  • Se corrige en los enlaces de la página en iFrame y admite enlaces entre el iFrame y la página principal.
  • Proporciona tamaños personalizados y métodos de desplazamiento.
  • Expone la posición principal y el tamaño de la ventana gráfica al iFrame.
  • Funciona con ViewerJS para admitir documentos PDF y ODF.
  • Soporte de respaldo hasta IE8.
Sergey Ponomarev
fuente
2

No todos pueden funcionar con los métodos anteriores.

javascript:

function resizer(id) {
        var doc = document.getElementById(id).contentWindow.document;
        var body_ = doc.body, html_ = doc.documentElement;

        var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
        var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);

        document.getElementById(id).style.height = height;
        document.getElementById(id).style.width = width;

    }

html:

<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv"  >
         <input id="txtHeight"/>height     <input id="txtWidth"/>width     
        <iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0"  ></iframe>
        <iframe src="left.aspx" name="leftFrame" scrolling="yes"   id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
        <iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; "  onload="resizer('Iframe2');" ></iframe>
</div>

Env: IE 10, Windows 7 x64

Kevin
fuente
2

Descubrí otra solución después de experimentar un poco. Originalmente probé el código marcado como 'mejor respuesta' a esta pregunta y no funcionó. Supongo que mi iframe en mi programa en ese momento se generó dinámicamente. Aquí está el código que usé (funcionó para mí):

Javascript dentro del iframe que se está cargando:

window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };

Es necesario agregar 4 o más píxeles a la altura para eliminar las barras de desplazamiento (algún error / efecto extraño de los iframes). El ancho es aún más extraño, es seguro agregar 18px al ancho del cuerpo. Asegúrese también de que tiene aplicado el CSS para el cuerpo del iframe (a continuación).

html, body {
   margin:0;
   padding:0;
   display:table;
}

iframe {
   border:0;
   padding:0;
   margin:0;
}

Aquí está el html para el iframe:

<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>

Aquí está todo el código dentro de mi iframe:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>File Upload</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
        display:table;
    }
    </style>
    <script type="text/javascript">
    window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };
    </script>
</head>
<body>
    This is a test.<br>
    testing
</body>
</html>

He realizado pruebas en Chrome y un poco en Firefox (en Windows XP). Todavía tengo más pruebas que hacer, así que dime cómo funciona esto para ti.

www139
fuente
gracias, esto funciona de maravilla en los navegadores móviles de lo que he probado y ahí es donde estaba teniendo problemas con el cambio de tamaño de los iframes.
Mircea Sandu
Me alegro de que te guste :-) En general, he encontrado que el iframe es mucho más eficiente y ofrece un mejor soporte para el navegador que Ajax.
www139
1
¡¡¡GRACIAS!!! Principalmente, porque usted es el único que especificó DÓNDE poner el código sin suponer que la gente lo sabe. Esta solución simple funcionó perfectamente para mí (Firefox, Chrome, Edge), para enmarcar contenido dinámico en el mismo dominio en mi sitio de Wordpress. Tengo una selección de forma que generará contenido dinámico de varias longitudes. El iFrame se ajusta maravillosamente. Tuve que ajustar el .clientHeight + 5 + 'px'; y clientWidth + 18 + 'px'; para ser más píxeles. Y no estoy seguro de por qué la pantalla: tabla; en el CSS era necesario, así que lo comenté para mis propósitos. Gracias de nuevo.
Heres2u
1

Así es como lo haría (probado en FF / Chrome):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe>
Latheesan
fuente
Si a Microsoft no le importa eso, ¿a quién debería importarle?
m3nda
1

Aquí hay varios métodos:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

Y OTRA ALTERNATIVA

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

PARA OCULTAR EL DESPLAZAMIENTO CON 2 ALTERNATIVAS COMO SE MUESTRA ARRIBA

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

HACK CON SEGUNDO CÓDIGO

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

Para ocultar las barras de desplazamiento del iFrame, se hace que el elemento primario "desborde: oculto" para ocultar las barras de desplazamiento y se hace que el iFrame pase al 150% de ancho y alto, lo que obliga a las barras de desplazamiento fuera de la página y, como el cuerpo no No tiene barras de desplazamiento. Uno no puede esperar que el iframe exceda los límites de la página. ¡Esto oculta las barras de desplazamiento del iFrame con todo su ancho!

fuente: establecer la altura automática del iframe

T.Todua
fuente
Se supone que los ejemplos que proporcionó deben hacer que el iframe tenga contenido completo, no autorizar la altura del iframe para que se ajuste a todo el contenido interno. No responde las preguntas.
nickornotto
1

Encontré que este cambio de tamaño funciona mejor:

function resizer(id)
{

    var doc = document.getElementById(id).contentWindow.document;
    var body_ = doc.body;
    var html_ = doc.documentElement;

    var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight,     html_.scrollHeight, html_.offsetHeight );
    var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

    document.getElementById(id).height = height;
    document.getElementById(id).width = width;

}

Tenga en cuenta que el objeto de estilo se elimina.

BabaRick
fuente
No funciona para mí en Chrome / Win10: el contenido se corta parcialmente en la parte inferior.
glenneroo
1

¡En jQuery, esta es la mejor opción para mí, que realmente me ayuda! Espero que te ayude!

iframe

<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>

jQuery

<script>            
        var valueSize = $( "#iframe" ).offset();
        var totalsize = (valueSize.top * 2) + valueSize.left;

        $( "#iframe" ).height(totalsize);            

</script>
Kike Gamboa
fuente
1

Contexto

Tuve que hacer esto yo mismo en un contexto de extensión web. Esta extensión web inyecta una parte de la interfaz de usuario en cada página, y esta interfaz de usuario vive dentro de un iframe. El contenido dentro del iframees dinámico, así que tuve que reajustar el ancho y la altura del iframemismo.

Uso React pero el concepto se aplica a todas las bibliotecas.

Mi solución (esto supone que controlas tanto la página como el iframe)

En el interior iframecambié los bodyestilos para tener dimensiones realmente grandes. Esto permitirá que los elementos en el interior se distribuyan utilizando todo el espacio necesario. Hacer widthy height100% no funcionó para mí (supongo que porque el iframe tiene un valor predeterminado width = 300pxy height = 150px)

/* something like this */
body {
  width: 99999px;
  height: 99999px;
}

Luego inyecté toda la interfaz de usuario de iframe dentro de un div y le di algunos estilos

#ui-root {
  display: 'inline-block';     
}

Después de renderizar mi aplicación dentro de esto #ui-root(en React hago esto dentro componentDidMount) calculo las dimensiones de este div como y las sincronizo con la página principal usando window.postMessage:

let elRect = el.getBoundingClientRect()
window.parent.postMessage({
  type: 'resize-iframe',
  payload: {
    width: elRect.width,
    height: elRect.height
  }
}, '*')

En el marco principal hago algo como esto:

window.addEventListener('message', (ev) => {
  if(ev.data.type && ev.data.type === 'resize-iframe') {
    iframe.style.width = ev.data.payload.width + 'px'
    iframe.style.height = ev.data.payload.height + 'px'
  }
}, false)
bboydflo
fuente
Buena solución! ¡Gracias!
redelschaap
0

Sé que la publicación es antigua, pero creo que esta es otra forma de hacerlo. Acabo de implementar en mi código. Funciona perfectamente tanto en la carga de la página como en el cambio de tamaño de la página:

var videoHeight;
var videoWidth;
var iframeHeight;
var iframeWidth;

function resizeIframe(){
    videoHeight = $('.video-container').height();//iframe parent div's height
    videoWidth = $('.video-container').width();//iframe parent div's width

    iframeHeight = $('.youtubeFrames').height(videoHeight);//iframe's height
    iframeWidth = $('.youtubeFrames').width(videoWidth);//iframe's width
}
resizeIframe();


$(window).on('resize', function(){
    resizeIframe();
});
Gabriel Ferraz
fuente
0

Javascript para ser colocado en el encabezado:

function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      }

Aquí va el código html de iframe:

<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>

Hoja de estilo css

>

.spec_iframe {
        width: 100%;
        overflow: hidden;
    }
Alin Razvan
fuente
0

Para el atributo de directiva angularjs:

G.directive ( 'previewIframe', function () {
return {
    restrict : 'A',
    replace : true,
    scope : true,
    link : function ( scope, elem, attrs ) {
        elem.on ( 'load', function ( e ) {
            var currentH = this.contentWindow.document.body.scrollHeight;
            this.style.height = eval( currentH ) + ( (25 / 100)* eval( currentH ) ) + 'px';
        } );
    }
};
} );

Observe el porcentaje, lo inserté para que pueda contrarrestar la escala que generalmente se realiza para iframe, texto, anuncios, etc., simplemente ponga 0 si no se implementa la escala

Tino Costa 'El Niño'
fuente
0

Así es como lo hice al cargar o cuando las cosas cambian.

parent.jQuery("#frame").height(document.body.scrollHeight+50);
MrPHP
fuente
0

Claramente, hay muchos escenarios, sin embargo, tenía el mismo dominio para documentos e iframe y pude agregar esto al final de mi contenido de iframe:

var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';

Esto 'encuentra' el contenedor principal y luego establece la longitud agregando un factor de falsificación de 50 píxeles para eliminar la barra de desplazamiento.

No hay nada allí para "observar" el cambio de altura del documento, esto no lo necesitaba para mi caso de uso. En mi respuesta, traigo un medio para hacer referencia al contenedor principal sin usar identificadores horneados en el contenido principal / iframe.

Gato de henry
fuente
0

Si puede vivir con una relación de aspecto fija y desea un iframe receptivo , este código le será útil. Son solo reglas CSS.

.iframe-container {
  overflow: hidden;
  /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 
  0.5625) */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

El iframe debe tener un div como contenedor.

<div class="iframe-container">
   <iframe src="http://example.org"></iframe>
</div>

El código fuente se basa en este sitio y Ben Marshall tiene una buena explicación.

negas
fuente
-1

Simplicidad:

var iframe = $("#myframe");
$(iframe.get(0).contentWindow).on("resize", function(){
    iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
    iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
});
Séverin
fuente
-1

Si el contenido es solo un html muy simple, la forma más simple es eliminar el iframe con javascript

Código HTML:

<div class="iframe">
    <iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>

Código Javascript:

function removeIframe(obj) {
    var iframeDocument = obj.contentDocument || obj.contentWindow.document;
    var mycontent = iframeDocument.getElementsByTagName("body")[0].innerHTML;
    obj.remove();
    document.getElementsByClassName("iframe")[0].innerHTML = mycontent;
}
Daniel Katz
fuente
1
Esto cambia el esquema del documento principal. Si desea tener otro documento como figura con una figcaption, esto no mantiene el esquema del documento como sucinto. Diferentes casos de uso, pero quería mover un fragmento de código a un iframe debido a razones resumidas.
Henry's Cat
-2
<iframe src="hello.html" sandbox="allow-same-origin"
        onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';this.style.width=(this.contentWindow.document.body.scrollWidth+20)+'px';">
</iframe>
Chong Lip Phang
fuente
Esto no es CSS, es JS.
Clifgriffin