0

Tengo una pagina con un iframe donde este interiormente tiene un formulario con varios elementos. Para ajustar el iframe y elementos interiores según el tamaño que tenga el navegador en ese momento tengo hecha una pequeña función en JavaScript.

Es decir al inicio de la pagina el tamaño que tiene inicialmente el navegador me salen todos los elementos del iframe ( caja de texto y botones ) ajustados al tamaño de la ventana padre. Pero cuando cambio el tamaño del navegador por un tamaño mas estrecho y mas largo hay elementos que no llegan a salir por falta de espacio vertical ( por ejemplo botones cerca del pie de la pagina )

Si vuelvo a llamar a la misma url que contiene la pagina para que me cargue de nuevo con el tamaño mas estrecho y largo que he cambiado del navegador entonces los elementos se recolocan perfectamente y los botones que antes no salian vuelven a aparecer.

El código que tengo puesto es el siguiente: En el body del HTML:

<iframe src="ruta/pantalla1.aspx" width="100%" height="100%" scrolling="no" id="myIframe" style="overflow: hidden; " onload="resizeIframe(this)" ></iframe>

En el script del head:

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

¿ Hay alguna forma de hacer por css o JavaScript que el iframe se ajuste dinámicamente a los cambios de tamaño del navegador ?

2 respuestas 2

1

mmm... solo te puedo indicar que en html5 el atributo height ya no puedes definir con "%" para alcanzar la altura total de la pantalla, en html5 se utiliza es el "vh" y como regla general en html5 es recomendable que todos los estilos esten incluido en el css para garantizar total compatibilidad.

Como alternativa debe incluirce dentro del atributo "style" aunque sigue siendo muy usado, algunos navegadores mobiles no son compatibles del todo y de vez en cuando se notan variaciones en los resultados.

Nota: utilizare como ejemplo la etiqueta "video", pero el resultado es el mismo en todos los casos tales como img, iframe, div entre otros.

#myIframe{
width: 100%;
height: 100vh;
}
<video id="myIframe" controls></video>

0

Al inicio te funciona por que ejecutas (onload) tu función de JS. Necesitas agregar el evento "onresize" y que ejecute la misma función

<iframe src="ruta/pantalla1.aspx" width="100%" height="100%" scrolling="no" id="myIframe" style="overflow: hidden; " onload="resizeIframe(this)" onresize="resizeIframe(this)"></iframe>
1
  • Parece que el "onresize" en el iframe no hace nada. Le he puesto un alert dentro para comprobar que ejecuta el codigo del resizeIframe y cuando vario el tamaño de la ventana del navegador el evento no funciona en cambio el evento "onload" si que se ejecuta bien. ¿ Es posible solucionarlo con addEventListener() ?
    – Popularfan
    el 10 ago. 2018 a las 7:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.