<iframe> - ¿Cómo mostrar toda la altura de la página referenciada?

StackOverflow https://stackoverflow.com/questions/58543

  •  09-06-2019
  •  | 
  •  

Pregunta

Tengo una aplicación que me gustaría integrar dentro del CMS de nuestra empresa.La única forma de hacerlo (me han dicho) es cargarlo en un <iframe>.

Fácil:solo configura height y width a 100%!Excepto que no funciona.

Descubrí cómo configurar frameborder a 0, así que al menos aspecto como parte del sitio, pero preferiría no tener una barra de desplazamiento fea adentro una página que ya tiene una.

¿Conoces algún truco para hacer esto?

EDITAR: Creo que necesito aclarar un poco mi pregunta:

  • el CMS de la empresa muestra toda la información y demás de nuestro sitio web
  • la mayoría de las páginas creadas a través del CMS
  • mi aplicación no lo es, pero me dejarán incrustarla en un <iframe>
  • No tengo control sobre el iframe, por lo que cualquier solución debe funcionar desde la página referenciada (según el src atributo de la iframe etiqueta)
  • el CMS muestra un pie de página, por lo que establecer la altura en 1 millón de píxeles no es una buena idea

¿Puedo acceder a las páginas principales DOM desde la página de referencia?Esto podría ayudar, pero veo que algunas personas tal vez no quieran que esto sea posible...

Esta técnica parece funcionar (espigado de varias fuentes, pero inspirado en el enlace de la respuesta aceptada:

En el documento principal:

<iframe id="MyIFRAME" name="MyIFRAME" 
    src="http://localhost/child.html"
    scrolling="auto" width="100%" frameborder="0">
    no iframes supported...
</iframe>

En niño:

<!-- ... -->
<body>
<script type="text/javascript">
    function resizeIframe() {

        var docHeight;
        if (typeof document.height != 'undefined') {
            docHeight = document.height;
        }
        else if (document.compatMode && document.compatMode != 'BackCompat') {
            docHeight = document.documentElement.scrollHeight;
        }
        else if (document.body 
            && typeof document.body.scrollHeight != 'undefined') {
            docHeight = document.body.scrollHeight;
        }

        // magic number: suppress generation of scrollbars...
        docHeight += 20;

        parent.document.getElementById('MyIFRAME').style.height = docHeight + "px";    
    }
    parent.document.getElementById('MyIFRAME').onload = resizeIframe;
    parent.window.onresize = resizeIframe;
</script>               
</body>

POR CIERTO: Esto sólo funcionará si el padre y el niño están en el mismo dominio debido a una restricción en JavaScript por razones de seguridad...

¿Fue útil?

Solución

Podría simplemente usar un lenguaje de secuencias de comandos para incluir la página en la página principal; de lo contrario, podría probar uno de estos métodos de JavaScript:

http://brondsema.net/blog/index.php/2007/06/06/100_height_iframe http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_22840093.html

Otros consejos

Siempre que su iframe esté alojado en el mismo servidor que la página que lo contiene, puede acceder a través de javascript.

Hay una serie de métodos sugeridos para establecer el iframe a la altura completa del contenido, cada uno con distintos grados de éxito: un Google para este problema muestra que es bastante común, ¡me temo que no existe una solución de consenso real y única para todos!

Varias personas han informado que este guión funciona, pero puede que sea necesario alguna modificación para su caso específico (nuevamente, suponiendo que su iframe y su página principal estén en el mismo dominio).

Puede que me esté perdiendo algo aquí, pero agregando scrolling=no como atributo de la iframe La etiqueta normalmente elimina las barras de desplazamiento.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top