Redimensionar dinámicamente un Iframe

Veo que esta pregunta se ha formulado varias veces, pero ninguna de las soluciones propuestas parece funcionar para el sitio que estoy creando, por lo que estoy volviendo a abrir el hilo. Estoy intentando dimensionar un iframe en function de la altura de su contenido. Tanto la página que contiene el iframe como su página de origen existen en el mismo dominio.

He probado las soluciones propuestas en cada uno de los siguientes hilos:

  • Cambiar el tamaño de la altura del iframe según la altura del contenido en él
  • Cambiar el tamaño de un iframe basado en el contenido

Creo que las soluciones anteriores no funcionan porque cuando se hace reference a body.clientHeight, el browser no ha determinado realmente la altura del documento.

Aquí está el código que estoy usando:

var ifmBlue = document.getElementById("ifmBlue"); ifmBlue.onload = resizeIframe; function resizeIframe() { var ifmBlue = document.getElementById("ifmBluePill"); var ifmDiv = ifmBlue.contentDocument.getElementById("main"); var height = ifmDiv.clientHeight; ifmBlue.style.height = (ifmBlue.contentDocument.body.scrollHeight || ifmBlue.contentDocument.body.offsetHeight || ifmBlue.contentDocument.body.parentNode.clientHeight || height || 500) + 5 + 'px'; } 

Si depuro el script usando Fire Depure, la altura del cliente del div principal de iframe.contentDocument es 0. Además, body.offsetHieght, y body.scrollHeight son 0. Sin embargo, después de que el script se termine de ejecutar, si inspecciono el DOM de el elemento de iframe HTML (usando Fire Depure) puedo ver que el cliente del cuerpo es 456 y el cliente del div interno. Height es 742. Esto me lleva a creer que estos valores aún no están configurados cuando se activa iframe.onload. Entonces, por uno de los hilos de arriba, moví el código al controller de events body.onload de la página fuente del iframe. Esta solución tampoco funcionó.

Cualquier ayuda que pueda proporcionar es muy apreciada.

Gracias,

CJ

3 Solutions collect form web for “Redimensionar dinámicamente un Iframe”

DynamicDrive tiene una secuencia de commands de este tipo , que creo que hace lo que está pidiendo.

También hay una versión más nueva ahora.


Actualización 2011:

Recomiendo utilizar AJAX en algo como esto, especialmente si se considera que un iframe de cambio de tamaño dynamic solo funciona en el mismo dominio.

Aún así, es un poco dudoso, por lo que si absolutamente debe usar AJAX sobre la carga de página estándar, realmente debería usar cosas como history.pushState (y tener una carga de página estándar como respaldo para los browseres que no la admiten). Hay un plugin de jQuery que maneja estas cosas para usted, escrito por un GitHubber, llamado pjax , que usan solo para la navigation de repository.

¿Has movido el controller? quizás también deba mover la function al marco interno, de modo que cuando tome valores de altura, haga reference al cuerpo directamente en lugar de a un object de marco … luego llame a una function de altura parent.set

otro truco, llamada function después de settimeout de 10 msecs

Recuerdo que tuve ese problema una vez, pero utilicé el getBoundingClientRect () de IE para get la altura del contenido, revisé el centro de desarrolladores de mozilla para encontrar algo similar, esto es solo una pista, no lo investigué

en otra nota, ¿qué es ifmBluePill? ¿es el iframe? o una div dentro de ella? ¿Por qué haces reference a "contentDocument" de un div?

Por cierto, DynamicDrive mejoró su script para cambiar el tamaño siempre, incluso si el contenido del iframe cambia: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

De su página:

Esta es la versión II de la secuencia de commands Iframe SSI original, que al igual que la secuencia de commands original le permite mostrar sin problemas contenido externo en su página a través de un IFRAME. Hace esto cambiando el tamaño de forma dinámica el IFRAME para que sea el alto de la página contenida en él, eliminando cualquier posible barra de desplazamiento IFRAME para que no aparezca mientras muestra todo el contenido externo. ¡Piense en ello como SSI (incluido el lado del server) emulado usando DHTML! Este script funciona tanto en IE5 + como en NS6 +, y para otros browseres, admite la opción de ocultar por completo el iframe en cuestión o mostrarlo utilizando su altura pnetworkingeterminada.

Ahora, este script difiere del original en que puede cargar documentos adicionales * en el IFRAME incluso después de que la página se haya cargado, y el IFRAME ajustará dinámicamente su altura para ajustarse al nuevo documento. Por lo tanto, utilice esta secuencia de commands si necesita no solo mostrar el contenido externo a través de la label IFRAME, sino que tiene la intención de cambiar este contenido una vez que la página se haya cargado.

  • ¿Por qué no se muestran los resultados de los Experimentos de contenido de Google Analytics?
  • La forma más simple de cambiar el borde de un campo de text en caso de error
  • ¿Puedes vincular .resize () a $ (documento) en lugar de $ (window)?
  • Borrar un campo de carga de files HTML a través de JavaScript
  • Permitir actualizar solo para elementos html específicos
  • Elementos flotantes a la parte inferior
  • AngularJS Select element establece el índice seleccionado
  • Javascript: comprobación de las celdas de la tabla circundante
  • ¿Cómo modifico la URL sin volver a cargar la página?
  • Hacer que el atributo de título aparezca instantáneamente en el vuelo estacionario
  • Menú desplegable Bootstrap Navbar en el lugar incorrecto
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.