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

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.

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

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.

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>

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>

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>

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

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>

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

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>

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.

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.

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

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.

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>

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

En caso de que alguien llegue aquí: tuve un problema con las soluciones cuando eliminé divs del iframe; el iframe no se acortó.

Hay un complemento de Jquery que hace el trabajo:

http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

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.

¡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>

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)

Es posible hacer un IFrame "fantasma" que actúa como si no estuviera allí.

Ver http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/

Básicamente, utiliza el sistema de eventos parent.postMessage(..)descrito en https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

¡Esto funciona en todos los navegadores modernos!

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

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

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

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

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

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.

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.

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

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

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